Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
4b3028bd
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
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看板
未验证
提交
4b3028bd
编写于
7月 03, 2023
作者:
D
diaochenggong
提交者:
Gitee
7月 03, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md.
Signed-off-by:
N
diaochenggong
<
diaochenggong2@huawei.com
>
上级
5f1c1083
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
32 addition
and
5 deletion
+32
-5
zh-cn/application-dev/reference/arkui-ts/figures/testlinearGradientBlur.png
...dev/reference/arkui-ts/figures/testlinearGradientBlur.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
...eference/arkui-ts/ts-universal-attributes-image-effect.md
+32
-5
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/testlinearGradientBlur.png
0 → 100644
浏览文件 @
4b3028bd
424.4 KB
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @
4b3028bd
...
...
@@ -13,7 +13,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。
<br/>
取值范围:[0, +∞)
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| linearGradientBlur |
{
<br/>
value: number,
<br/>
options: LinearGradientBlurOptions
<br/>
} | - | 为当前组件添加内容线性渐变模糊效果,入参1为模糊半径,模糊半径越大越模糊,为0时不模糊。
<br/>
取值范围:[0, +∞)
<br/>
入参2为线性梯度模糊选项,LinearGradientBlurOptions线性梯度模糊包含两个部分fractionStops和direction
<br/>
fractionStops数组中保存的每一个二元数组(取值0-1,小于0则为0,大于0则为1)表示[模糊程度, 模糊位置];模糊位置需严格递增,开发者传入的数据不符合规范会记录日志,渐变模糊不生效数组中二元数组个数必须大于等于2,否则渐变模糊不生效
<br/>
direction为渐变模糊方向,默认值为GradientDirection.Bottom
<br/>
从API version 10开始,该接口支持在ArkTS卡片中使用。 |
| linearGradientBlur |
<br/>
value: number,
<br/>
{
<br/>
fractionStops:Array
<FractionStop>
,
<br/>
direction:GradientDirection
<br/>
}
<br/>
| - | 为当前组件添加内容线性渐变模糊效果,value为模糊半径,模糊半径越大越模糊,为0时不模糊。
<br/>
取值范围:[0, +∞)
<br/>
线性梯度模糊包含两个部分fractionStops和direction
<br/>
fractionStops数组中保存的每一个二元数组(取值0-1,小于0则为0,大于0则为1)表示[模糊程度, 模糊位置];
<br/>
模糊位置需严格递增,开发者传入的数据不符合规范会记录日志,渐变模糊不生效数组中二元数组个数必须大于等于2,否则渐变模糊不生效
<br/>
direction为渐变模糊方向,默认值为GradientDirection.Bottom
<br/>
从API version 10开始,该接口支持在ArkTS卡片中使用。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。
<br/>
取值范围:
[
0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| shadow | [ShadowOptions
](
#shadowoptions对象说明
)
\|
[
ShadowStyle
](
#shadowstyle10枚举说明
)
<sup>
10+
</sup>
| - | 为当前组件添加阴影效果。
<br/>
入参类型为ShadowOptions时,可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
<br/>
入参类型为ShadowStyle时,可指定不同阴影样式。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用,ArkTS卡片上不支持参数为
[
ShadowStyle
](
#shadowstyle10枚举说明
)
类型。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比)
<br/>
取值范围:[0, 1]
<br/>
**说明:**
<br/>
设置小于0的值时,按值为0处理,设置大于1的值时,按值为1处理。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
...
...
@@ -55,7 +55,7 @@
## 示例
### 示例1
模糊属性的用法,blur内容模糊,
linearGradientBlur内容线性渐变模糊,
backdropBlur背景模糊。
模糊属性的用法,blur内容模糊,backdropBlur背景模糊。
```
ts
// xxx.ets
@
Entry
...
...
@@ -73,8 +73,6 @@ struct BlurEffectsExample {
.
blur
(
2
).
margin
(
10
)
Text
(
'
blur text
'
)
.
blur
(
3
).
margin
(
10
)
Text
(
'
linearGradientBlur text
'
)
.
linearGradientBlur
(
60
,{
fractionStops
:
[[
0
,
0
],[
0.5
,
1
],[
1
,
1
]],
direction
:
GradientDirection
.
Bottom
}).
margin
(
10
)
}.
width
(
'
90%
'
).
height
(
40
)
.
backgroundColor
(
0xF9CF93
)
...
...
@@ -323,4 +321,33 @@ struct PixelStretchExample {
跟原图对比发现,效果图分两步实现:
<br>
1、原图大小缩小,缩小后的大小为原图大小减去像素
收缩的距离。例如,原图大小为
`100*100`
,设置了
`pixelStretchEffect({top:-10,left:-10,
right:-10,bottom:-10 })`
,则缩小后的大小为
`(100-10-10)*(100-10-10)`
,即
`80*80`
。
<br>
2、使用边缘像素扩展,将图像扩展为原图大小。
\ No newline at end of file
right:-10,bottom:-10 })`
,则缩小后的大小为
`(100-10-10)*(100-10-10)`
,即
`80*80`
。
<br>
2、使用边缘像素扩展,将图像扩展为原图大小。
### 示例8
设置组件的内容线性渐变模糊效果。
```
ts
// xxx.ets
@
Entry
@
Component
struct
ImageExample1
{
private_resource1
:
Resource
=
$r
(
'
app.media.1
'
)
@
State
image_src
:
Resource
=
this
.
private_resource1
build
()
{
Column
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Start
})
{
Row
({
space
:
5
})
{
Image
(
this
.
image_src
)
.
linearGradientBlur
(
60
,
{
fractionStops
:
[[
0
,
0
],[
0
,
0.33
],[
1
,
0.66
],[
1
,
1
]],
direction
:
GradientDirection
.
Bottom
})
}
}
}
}
}
```
效果图如下:
![
testlinearGradientBlur
](
figures/testlinearGradientBlur.png
)
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录