diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/testlinearGradientBlur.png b/zh-cn/application-dev/reference/arkui-ts/figures/testlinearGradientBlur.png new file mode 100644 index 0000000000000000000000000000000000000000..31670804a45639913c06b482dfe421277a2c0b3b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/testlinearGradientBlur.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 7968ab18977dd860550bac1032da43924a9db146..f3cdf5b0abe96bd4d045562f796f7a8d31028118 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -13,6 +13,7 @@ | 名称 | 参数类型 | 默认值 | 描述 | | -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| linearGradientBlur10+ |
value: number,
{
fractionStops:Array,
direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)
}
| - | 为当前组件添加内容线性渐变模糊效果，
-value为模糊半径，模糊半径越大越模糊，为0时不模糊。取值范围：[0, +∞)
线性梯度模糊包含两个部分fractionStops和direction
-fractionStops数组中保存的每一个二元数组（取值0-1，小于0则为0，大于0则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效
-direction为渐变模糊方向，默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom
从API version 10开始，该接口支持在ArkTS卡片中使用。 | | backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | shadow | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)10+ | - | 为当前组件添加阴影效果。
入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
入参类型为ShadowStyle时，可指定不同阴影样式。
从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 | | grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理，设置大于1的值时，按值为1处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | @@ -320,4 +321,31 @@ struct PixelStretchExample { 跟原图对比发现，效果图分两步实现：
1、原图大小缩小，缩小后的大小为原图大小减去像素 收缩的距离。例如，原图大小为`100*100`，设置了`pixelStretchEffect({top:-10,left:-10, -right:-10,bottom:-10 })`，则缩小后的大小为`(100-10-10)*(100-10-10)`，即`80*80`。
2、使用边缘像素扩展，将图像扩展为原图大小。 \ No newline at end of file +right:-10,bottom:-10 })`，则缩小后的大小为`(100-10-10)*(100-10-10)`，即`80*80`。
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