Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
cf4f1e0f
D
Docs
项目概览
OpenHarmony
/
Docs
大约 2 年 前同步成功
通知
161
Star
293
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
cf4f1e0f
编写于
10月 28, 2022
作者:
L
luoying_ace
提交者:
Gitee
10月 28, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md.
Signed-off-by:
N
luoying_ace
<
luoying19@huawei.com
>
上级
fc1f1d80
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
16 addition
and
18 deletion
+16
-18
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
...erence/arkui-ts/ts-universal-attributes-sharp-clipping.md
+16
-18
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
浏览文件 @
cf4f1e0f
...
...
@@ -12,7 +12,7 @@
| 名称 | 参数类型 | 描述 |
| -----| ------------------------------------------ | ------------------------------------ |
| clip |
[
Circle
](
ts-drawing-components-circle.md
)
\|
[Ellipse](ts-drawing-components-ellipse.md)
\|
[Path](ts-drawing-components-path.md)
\|
[Rect](ts-drawing-components-rect.md)
\|
boolean | 参数为相应类型的组件,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照边缘轮廓进行裁剪。
<br>
默认值:false |
| clip |
[
Circle
](
ts-drawing-components-circle.md
)
\|
[Ellipse](ts-drawing-components-ellipse.md)
\|
[Path](ts-drawing-components-path.md)
\|
[Rect](ts-drawing-components-rect.md)
\|
boolean | 参数为相应类型的组件,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照
父容器
边缘轮廓进行裁剪。
<br>
默认值:false |
| mask |
[
Circle
](
ts-drawing-components-circle.md
)
\|
[Ellipse](ts-drawing-components-ellipse.md)
\|
[Path](ts-drawing-components-path.md)
\|
[Rect](ts-drawing-components-rect.md)
| 在当前组件上加上指定形状的遮罩。 |
...
...
@@ -24,34 +24,32 @@
@
Component
struct
ClipAndMaskExample
{
build
()
{
Column
({
space
:
5
})
{
Text
(
'
clip
'
).
fontSize
(
9
).
width
(
'
90%
'
).
fontColor
(
0xCCCCCC
)
// 用一个280px直径的圆对图像进行裁剪
Image
(
$r
(
'
app.media.example
'
))
.
clip
(
new
Circle
({
width
:
80
,
height
:
80
}))
.
width
(
'
500px
'
).
height
(
'
280px
'
)
Column
({
space
:
15
})
{
Text
(
'
clip
'
).
fontSize
(
12
).
width
(
'
75%
'
).
fontColor
(
'
#DCDCDC
'
)
Row
()
{
Image
(
$r
(
'
app.media.
example
'
)).
width
(
'
500px
'
).
height
(
'
280px
'
)
Image
(
$r
(
'
app.media.
testImg
'
)).
width
(
'
500px
'
).
height
(
'
280px
'
)
}
.
clip
(
true
)
.
clip
(
true
)
// 如这里不设置clip为true,则Row组件的圆角不会限制其中的Image组件,Image组件的四个角会超出Row
.
borderRadius
(
20
)
// 用一个280px直径的圆对图片进行裁剪
Image
(
$r
(
'
app.media.testImg
'
))
.
clip
(
new
Circle
({
width
:
'
280px
'
,
height
:
'
280px
'
}))
.
width
(
'
500px
'
).
height
(
'
280px
'
)
Text
(
'
mask
'
).
fontSize
(
9
).
width
(
'
90%
'
).
fontColor
(
0xCCCCCC
)
// 给图
像添加了一个500px*280px的
遮罩
Image
(
$r
(
'
app.media.
example
'
))
Text
(
'
mask
'
).
fontSize
(
12
).
width
(
'
75%
'
).
fontColor
(
'
#DCDCDC
'
)
// 给图
片添加了一个500px*280px的方形
遮罩
Image
(
$r
(
'
app.media.
testImg
'
))
.
mask
(
new
Rect
({
width
:
'
500px
'
,
height
:
'
280px
'
}).
fill
(
Color
.
Gray
))
.
width
(
'
500px
'
).
height
(
'
280px
'
)
// 给图
像添加了一个280px*280px的圆
遮罩
Image
(
$r
(
'
app.media.
example
'
))
// 给图
片添加了一个280px*280px的圆形
遮罩
Image
(
$r
(
'
app.media.
testImg
'
))
.
mask
(
new
Circle
({
width
:
'
280px
'
,
height
:
'
280px
'
}).
fill
(
Color
.
Gray
))
.
width
(
'
500px
'
).
height
(
'
28
1
px
'
)
.
width
(
'
500px
'
).
height
(
'
28
0
px
'
)
}
.
width
(
'
100%
'
)
.
margin
({
top
:
5
})
.
margin
({
top
:
1
5
})
}
}
```

编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录