1# 图像效果 2 3设置组件的模糊、阴影、球面效果以及设置图片的图像效果。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## blur 10 11blur(value: number, options?: BlurOptions) 12 13为组件添加内容模糊效果。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| --------------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 23| value | number | 是 | 当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | 24| options<sup>11+</sup> | [BlurOptions](ts-appendix-enums.md#bluroptions11) | 否 | 灰阶梯参数。 | 25 26## backdropBlur 27 28backdropBlur(value: number, options?: BlurOptions) 29 30为组件添加背景模糊效果。 31 32**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36**参数：** 37 38| 参数名 | 类型 | 必填 | 说明 | 39| --------------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 40| value | number | 是 | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | 41| options<sup>11+</sup> | [BlurOptions](ts-appendix-enums.md#bluroptions11) | 否 | 灰阶梯参数。 | 42 43## shadow 44 45shadow(value: ShadowOptions | ShadowStyle) 46 47为组件添加阴影效果。 48 49**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10枚举说明)类型。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 57| value | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)<sup>10+</sup> | 是 | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>入参类型为ShadowStyle时，可指定不同阴影样式。 | 58 59## grayscale 60 61grayscale(value: number) 62 63为组件添加灰度效果。 64 65**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 66 67**系统能力：** SystemCapability.ArkUI.ArkUI.Full 68 69**参数：** 70 71| 参数名 | 类型 | 必填 | 说明 | 72| ------ | ------ | ---- | ------------------------------------------------------------ | 73| value | number | 是 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)<br/>默认值：0.0<br/>取值范围：[0.0, 1.0]<br/>**说明：**<br/>设置小于0.0的值时，按值为0.0处理，设置大于1.0的值时，按值为1.0处理。 | 74 75## brightness 76 77brightness(value: number) 78 79为组件添加高光效果。 80 81**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 82 83**系统能力：** SystemCapability.ArkUI.ArkUI.Full 84 85**参数：** 86 87| 参数名 | 类型 | 必填 | 说明 | 88| ------ | ------ | ---- | ------------------------------------------------------------ | 89| value | number | 是 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大，但大于2后亮度效果变化不明显。<br/>默认值：1.0<br/>推荐取值范围：[0, 2]<br/>**说明：**<br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 90 91## saturate 92 93saturate(value: number) 94 95为组件添加饱和度效果。 96 97**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 98 99**系统能力：** SystemCapability.ArkUI.ArkUI.Full 100 101**参数：** 102 103| 参数名 | 类型 | 必填 | 说明 | 104| ------ | ------ | ---- | ------------------------------------------------------------ | 105| value | number | 是 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）<br/>默认值：1.0<br/>推荐取值范围：[0, 50)<br/>**说明：**<br/>设置小于0的值时，按值为0处理。 | 106 107## contrast 108 109contrast(value: number) 110 111为组件添加对比度效果。 112 113**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117**参数：** 118 119| 参数名 | 类型 | 必填 | 说明 | 120| ------ | ------ | ---- | ------------------------------------------------------------ | 121| value | number | 是 | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）<br/>默认值：1.0<br/>推荐取值范围：[0, 10)<br/>**说明：**<br/>设置小于0的值时，按值为0处理。 | 122 123## invert 124 125invert(value: number | InvertOptions) 126 127反转输入的图像。 128 129**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133**参数：** 134 135| 参数名 | 类型 | 必填 | 说明 | 136| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 137| value | number \| [InvertOptions](#invertoptions11对象说明)<sup>11+</sup> | 是 | 反转输入的图像。<br/>入参对象为number时,入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）<br/>取值范围：[0, 1]<br/>设置小于0的值时，按值为0处理。<br/>入参对象为 InvertOptions时，对比背景颜色灰度值和阈值区间，背景颜色灰度值小于阈值区间时反色取high值，当背景颜色灰度值大于阈值区间时反色取low值，背景颜色灰度值在阈值区间内取值由high线性渐变到low。 | 138 139## sepia 140 141sepia(value: number) 142 143将图像转换为深褐色。 144 145**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 146 147**系统能力：** SystemCapability.ArkUI.ArkUI.Full 148 149**参数：** 150 151| 参数名 | 类型 | 必填 | 说明 | 152| ------ | ------ | ---- | ------------------------------------------------------------ | 153| value | number | 是 | 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。 （百分比） | 154 155## hueRotate 156 157hueRotate(value: number | string) 158 159色相旋转效果。 160 161**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 162 163**系统能力：** SystemCapability.ArkUI.ArkUI.Full 164 165**参数：** 166 167| 参数名 | 类型 | 必填 | 说明 | 168| ------ | -------------------------- | ---- | ------------------------------------------------------------ | 169| value | number \| string | 是 | 色相旋转效果，输入参数为旋转角度。<br/>默认值：'0deg'<br/>取值范围：(-∞, +∞)<br/>**说明：**<br/>色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。 | 170 171## colorBlend<sup>7+</sup> 172 173colorBlend(value: Color | string | Resource) 174 175为组件添加颜色叠加效果。 176 177**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 178 179**系统能力：** SystemCapability.ArkUI.ArkUI.Full 180 181**参数：** 182 183| 参数名 | 类型 | 必填 | 说明 | 184| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------- | 185| value | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | 是 | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 | 186 187## linearGradientBlur<sup>10+</sup> 188 189linearGradientBlur(value: number, options: LinearGradientBlurOptions) 190 191为组件添加内容线性渐变模糊效果。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**参数：** 196 197| 参数名 | 类型 | 必填 | 说明 | 198| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 199| value | number | 是 | 为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>取值范围：[0, 60]<br/>线性梯度模糊包含两个部分fractionStops和direction。 | 200| options | [LinearGradientBlurOptions](#lineargradientbluroptions10对象说明) | 是 | 设置线性渐变模糊效果。 | 201 202## renderGroup<sup>10+</sup> 203 204renderGroup(value: boolean) 205 206设置当前控件和子控件是否先整体离屏渲染绘制后再与父控件融合绘制。 207 208**系统能力：** SystemCapability.ArkUI.ArkUI.Full 209 210**参数：** 211 212| 参数名 | 类型 | 必填 | 说明 | 213| ------ | ------- | ---- | ------------------------------------------------------------ | 214| value | boolean | 是 | 设置当前控件和子控件是否先整体离屏渲染绘制后再与父控件融合绘制。当前控件的不透明度不为1时绘制效果可能有差异。<br/>默认值：false | 215 216## blendMode<sup>11+</sup> 217 218blendMode(value: BlendMode, type?: BlendApplyType) 219 220将当前控件的内容（包含子节点内容）与下方画布（可能为离屏画布）已有内容进行混合。 221 222**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 223 224**系统能力：** SystemCapability.ArkUI.ArkUI.Full 225 226**参数：** 227 228| 参数名 | 类型 | 必填 | 说明 | 229| ------ | ------------------------------- | ---- | ------------------------------------------------------------ | 230| value | [BlendMode](#blendmode11枚举说明) | 是 | 混合模式。<br/>默认值：BlendMode.NONE | 231| type | [BlendApplyType](ts-appendix-enums.md#blendapplytype11) | 否 | blendMode实现方式是否离屏。<br/>默认值：BlendApplyType.FAST<br/>**说明：**<br/>1. 设置BlendApplyType.FAST时，不离屏。<br/>2. 设置BlendApplyType.OFFSCREEN时，会先将当前组件（含子组件）的内容绘制到离屏画布上，再用指定的混合模式与下方画布已有内容进行混合。 | 232 233## useShadowBatching<sup>11+</sup> 234 235useShadowBatching(value: boolean) 236 237控件内部子节点的阴影进行同层绘制，同层元素阴影重叠。 238 239**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 240 241**系统能力：** SystemCapability.ArkUI.ArkUI.Full 242 243**参数：** 244 245| 参数名 | 类型 | 必填 | 说明 | 246| ------ | ------- | ---- | ------------------------------------------------------------ | 247| value | boolean | 是 | 控件内部子节点的阴影进行同层绘制，同层元素阴影重叠。<br/>默认值：false<br/>**说明：**<br/>1. 默认不开启，如果子节点的阴影半径较大，节点各自的阴影会互相重叠。 当开启时，元素的阴影将不会重叠。<br/>2. 不推荐useShadowBatching嵌套使用，如果嵌套使用，只会对当前的子节点生效，无法递推。 | 248 249## ShadowOptions对象说明 250 251阴影属性集合，用于设置阴影的模糊半径、阴影的颜色、X轴和Y轴的偏移量。 252 253从API version 9开始，该接口支持在ArkTS卡片中使用。 254 255| 名称 | 类型 | 必填 | 说明 | 256| ------- | ---------------------------------------- | ---- | ---------------------------------------- | 257| radius | number \| [Resource](ts-types.md#resource) | 是 | 阴影模糊半径。<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。 | 258| type<sup>10+</sup> | [ShadowType<sup>10+</sup>](ts-appendix-enums.md#shadowtype10) | 否 | 阴影类型。<br/>默认为COLOR。 | 259| color | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource)\| [ColoringStrategy<sup>10+</sup> ](ts-types.md#coloringstrategy10) | 否 | 阴影的颜色。<br/>默认为黑色。 <br/>**说明：** <br/>从API version 11开始，该接口支持使用ColoringStrategy实现智能取色，智能取色功能不支持在ArkTS卡片、[textShadow](ts-basic-components-text.md#属性)中使用。<br/>当前仅支持平均取色和主色取色，智能取色区域为shadow绘制区域。<br/>支持使用'average'字符串触发智能平均取色模式，支持使用'primary'字符串触发智能主色模式。 | 260| offsetX | number \| [Resource](ts-types.md#resource) | 否 | 阴影的X轴偏移量。<br/>默认为0。 | 261| offsetY | number \| [Resource](ts-types.md#resource) | 否 | 阴影的Y轴偏移量。<br/>默认为0。 | 262| fill<sup>11+</sup> | boolean | 否 | 阴影是否内部填充。<br/>默认为false。<br/>**说明：**<br/>[textShadow](ts-basic-components-text.md#属性)中该字段不生效 | 263 264## ShadowStyle<sup>10+</sup>枚举说明 265 266| 名称 | 描述 | 267| ----------------- | ------ | 268| OUTER_DEFAULT_XS | 超小阴影。 | 269| OUTER_DEFAULT_SM | 小阴影。 | 270| OUTER_DEFAULT_MD | 中阴影。 | 271| OUTER_DEFAULT_LG | 大阴影。 | 272| OUTER_FLOATING_SM | 浮动小阴影。 | 273| OUTER_FLOATING_MD | 浮动中阴影。 | 274 275## BlendMode<sup>11+</sup>枚举说明 276 277> **说明：** 278> 279> blendMode枚举中，s表示源像素，d表示目标像素，sa表示原像素透明度，da表示目标像素透明度，r表示混合后像素，ra表示混合后像素透明度。 280 281| 名称 | 描述 | 282| ---------------| ------ | 283| NONE | 将上层图像直接覆盖到下层图像上，不进行任何混合操作。 | 284| CLEAR | 将源像素覆盖的目标像素清除为完全透明。 | 285| SRC | r = s，只显示源像素。 | 286| DST | r = d，只显示目标像素。 | 287| SRC_OVER | r = s + (1 - sa) * d，将源像素按照透明度进行混合，覆盖在目标像素上。 | 288| DST_OVER | r = d + (1 - da) * s，将目标像素按照透明度进行混合，覆盖在源像素上。 | 289| SRC_IN | r = s * da，只显示源像素中与目标像素重叠的部分。 | 290| DST_IN | r = d * sa，只显示目标像素中与源像素重叠的部分。 | 291| SRC_OUT | r = s * (1 - da)，只显示源像素中与目标像素不重叠的部分。 | 292| DST_OUT | r = d * (1 - sa)，只显示目标像素中与源像素不重叠的部分。 | 293| SRC_ATOP | r = s * da + d * (1 - sa)，在源像素和目标像素重叠的地方绘制源像素，在源像素和目标像素不重叠的地方绘制目标像素。 | 294| DST_ATOP | r = d * sa + s * (1 - da)，在源像素和目标像素重叠的地方绘制目标像素，在源像素和目标像素不重叠的地方绘制源像素。 | 295| XOR | r = s * (1 - da) + d * (1 - sa)，只显示源像素与目标像素不重叠的部分。 | 296| PLUS | r = min(s + d, 1)，将源像素值与目标像素值相加，并将结果作为新的像素值。 | 297| MODULATE | r = s * d，将源像素与目标像素进行乘法运算，并将结果作为新的像素值。 | 298| SCREEN | r = s + d - s * d，将两个图像的像素值相加，然后减去它们的乘积来实现混合。 | 299| OVERLAY | 根据目标像素来决定使用MULTIPLY混合模式还是SCREEN混合模式。 | 300| DARKEN | rc = s + d - max(s * da, d * sa), ra = kSrcOver，当两个颜色重叠时，较暗的颜色会覆盖较亮的颜色。 | 301| LIGHTEN | rc = s + d - min(s * da, d * sa), ra = kSrcOver，将源图像和目标图像中的像素进行比较，选取两者中较亮的像素作为最终的混合结果。 | 302| COLOR_DODGE | 使目标像素变得更亮来反映源像素。 | 303| COLOR_BURN | 使目标像素变得更暗来反映源像素。 | 304| HARD_LIGHT | 根据源像素的值来决定目标像素变得更亮或者更暗。根据源像素来决定使用MULTIPLY混合模式还是SCREEN混合模式。 | 305| SOFT_LIGHT | 根据源像素来决定使用LIGHTEN混合模式还是DARKEN混合模式。 | 306| DIFFERENCE | rc = s + d - 2 * (min(s * da, d * sa)), ra = kSrcOver，对比源像素和目标像素，亮度更高的像素减去亮度更低的像素，产生高对比度的效果。 | 307| EXCLUSION | rc = s + d - two(s * d), ra = kSrcOver，对比源像素和目标像素，亮度更高的像素减去亮度更低的像素，产生柔和的效果。 | 308| MULTIPLY | r = s * (1 - da) + d * (1 - sa) + s * d，将源图像与目标图像进行乘法混合，得到一张新的图像。 | 309| HUE | 保留源图像的亮度和饱和度，但会使用目标图像的色调来替换源图像的色调。 | 310| SATURATION | 保留目标像素的亮度和色调，但会使用源像素的饱和度来替换目标像素的饱和度。 | 311| COLOR | 保留源像素的饱和度和色调，但会使用目标像素的亮度来替换源像素的亮度。 | 312| LUMINOSITY | 保留目标像素的色调和饱和度，但会用源像素的亮度替换目标像素的亮度。 | 313 314## LinearGradientBlurOptions<sup>10+</sup>对象说明 315 316| 名称 | 类型 | 必填 | 说明 | 317| ------------- | ----------------------------------------------------------- | ----- | ------------------------------------------------------------ | 318| fractionStops | Array\<[FractionStop](#fractionstop)> | 是 | 数组中保存的每一个二元数组（取值0-1，小于0则为0，大于0则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效。 | 319| direction | [GradientDirection](ts-appendix-enums.md#gradientdirection) | 是 | 渐变模糊方向。<br/>默认值：<br/>GradientDirection.Bottom | 320 321## FractionStop 322 323FractionStop = [ number, number ] 324 325定义模糊段。元组中的第一个元素表示分数。该值的范围为[0,1]。值1表示不透明，0表示完全透明。第二个元素表示停止位置。该值的范围为[0,1]。值1表示区域结束位置，0表示区域开始位置。 326 327## InvertOptions<sup>11+</sup>对象说明 328 329前景智能取反色。 330 331| 名称 | 类型 | 必填 | 说明 | 332| -------------- | ------ | ----- | ------------------------------------------ | 333| low | number | 是 | 背景颜色灰度值大于阈值区间时的取值。 | 334| high | number | 是 | 背景颜色灰度值小于阈值区间时的取值。 | 335| threshold | number | 是 | 灰度阈值。 | 336| thresholdRange | number | 是 | 阈值范围。<br/>**说明：**<br/>灰度阈值上下偏移thresholdRange构成阈值区间，背景颜色灰度值在区间内取值由high线性渐变到low。| 337 338## 示例 339 340### 示例1 341模糊属性的用法，blur内容模糊，backdropBlur背景模糊。 342```ts 343// xxx.ets 344@Entry 345@Component 346struct BlurEffectsExample { 347 build() { 348 Column({ space: 10 }) { 349 // 对字体进行模糊 350 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') 351 Flex({ alignItems: ItemAlign.Center }) { 352 Text('original text').margin(10) 353 Text('blur text') 354 .blur(5).margin(10) 355 Text('blur text') 356 .blur(10).margin(10) 357 Text('blur text') 358 .blur(15).margin(10) 359 }.width('90%').height(40) 360 .backgroundColor(0xF9CF93) 361 362 363 // 对背景进行模糊 364 Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') 365 Text() 366 .width('90%') 367 .height(40) 368 .fontSize(16) 369 .backdropBlur(3) 370 .backgroundImage($r('app.media.image')) 371 .backgroundImageSize({ width: 1200, height: 160 }) 372 }.width('100%').margin({ top: 5 }) 373 } 374} 375``` 376 377 378 379### 示例2 380设置图片的效果，包括阴影，灰度，高光，饱和度，对比度，图像反转，叠色，色相旋转等。 381```ts 382// xxx.ets 383@Entry 384@Component 385struct ImageEffectsExample { 386 build() { 387 Column({ space: 5 }) { 388 // 添加阴影效果，图片效果不变 389 Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') 390 Image($r('app.media.image')) 391 .width('90%') 392 .height(30) 393 .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 20 }) 394 395 // 添加内部阴影效果 396 Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') 397 Image($r('app.media.image')) 398 .width('90%') 399 .height(30) 400 .shadow({ radius: 5, color: Color.Green, offsetX: 20, offsetY: 20,fill:true }).opacity(0.5) 401 402 // 灰度效果0~1，越接近1，灰度越明显 403 Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%') 404 Image($r('app.media.image')).width('90%').height(30).grayscale(0.3) 405 Image($r('app.media.image')).width('90%').height(30).grayscale(0.8) 406 407 // 高光效果，1为正常图片，<1变暗，>1亮度增大 408 Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%') 409 Image($r('app.media.image')).width('90%').height(30).brightness(1.2) 410 411 // 饱和度，原图为1 412 Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%') 413 Image($r('app.media.image')).width('90%').height(30).saturate(2.0) 414 Image($r('app.media.image')).width('90%').height(30).saturate(0.7) 415 416 // 对比度，1为原图，>1值越大越清晰，<1值越小越模糊 417 Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%') 418 Image($r('app.media.image')).width('90%').height(30).contrast(2.0) 419 Image($r('app.media.image')).width('90%').height(30).contrast(0.8) 420 421 // 图像反转比例 422 Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%') 423 Image($r('app.media.image')).width('90%').height(30).invert(0.2) 424 Image($r('app.media.image')).width('90%').height(30).invert(0.8) 425 426 // 叠色添加 427 Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%') 428 Image($r('app.media.image')).width('90%').height(30).colorBlend(Color.Green) 429 Image($r('app.media.image')).width('90%').height(30).colorBlend(Color.Blue) 430 431 // 深褐色 432 Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%') 433 Image($r('app.media.image')).width('90%').height(30).sepia(0.8) 434 435 // 色相旋转 436 Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%') 437 Image($r('app.media.image')).width('90%').height(30).hueRotate(90) 438 }.width('100%').margin({ top: 5 }) 439 } 440} 441``` 442 443 444 445 446### 示例3 447 448设置组件的内容线性渐变模糊效果。 449 450```ts 451// xxx.ets 452@Entry 453@Component 454struct ImageExample1 { 455 private_resource1:Resource = $r('app.media.testlinearGradientBlurOrigin') 456 @State image_src: Resource = this.private_resource1 457 build() { 458 Column() { 459 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { 460 Row({ space: 5 }) { 461 Image(this.image_src) 462 .linearGradientBlur(60, { fractionStops: [[0,0],[0,0.33],[1,0.66],[1,1]], direction: GradientDirection.Bottom }) 463 } 464 } 465 } 466 } 467} 468 469``` 470 471 472 473### 示例4 474renderGroup示例 475```ts 476// xxx.ets 477@Component 478struct Component1 { 479 @Prop renderGroupValue: boolean; 480 build() { 481 Row() { 482 Row() { 483 Row() 484 .backgroundColor(Color.Black) 485 .width(100) 486 .height(100) 487 .opacity(1) 488 } 489 .backgroundColor(Color.White) 490 .width(150) 491 .height(150) 492 .justifyContent(FlexAlign.Center) 493 .opacity(0.6) 494 .renderGroup(this.renderGroupValue) 495 } 496 .backgroundColor(Color.Black) 497 .width(200) 498 .height(200) 499 .justifyContent(FlexAlign.Center) 500 .opacity(1) 501 } 502} 503@Entry 504@Component 505struct RenderGroupExample { 506 build() { 507 Column() { 508 Component1({renderGroupValue: true}) 509 .margin(20) 510 Component1({renderGroupValue: false}) 511 .margin(20) 512 } 513 .width("100%") 514 .height("100%") 515 .alignItems(HorizontalAlign.Center) 516 } 517} 518``` 519 520 521 522### 示例5 523单独使用blendMode 524```ts 525// xxx.ets 526@Entry 527@Component 528struct Index { 529 build() { 530 Column() { 531 Text("blendMode") 532 .fontSize(20) 533 .fontWeight(FontWeight.Bold) 534 .fontColor('#ffff0101') 535 Row() { 536 Circle() 537 .width(200) 538 .height(200) 539 .fill(Color.Green) 540 .position({ x: 50, y: 50 }) 541 Circle() 542 .width(200) 543 .height(200) 544 .fill(Color.Blue) 545 .position({ x: 150, y: 50 }) 546 } 547 .blendMode(BlendMode.OVERLAY,BlendApplyType.OFFSCREEN) 548 .alignItems(VerticalAlign.Center) 549 .height(300) 550 .width('100%') 551 } 552 .height('100%') 553 .width('100%') 554 .backgroundImage($r('app.media.image')) 555 .backgroundImageSize(ImageSize.Cover) 556 } 557} 558``` 559 560<br/>BlendMode.OVERLAY,BlendApplyType.OFFSCREEN<br/> 561 562<br/>不同的混合模式搭配是否需要离屏从而产生不同的效果。 563 564### 示例6 565 566blendMode搭配backgroundEffect实现文字异形模糊效果。<br/> 567如果出现漏线问题，开发者应首先确保两个blendMode所在组件大小严格相同。如果确认相同，可能是组件边界落在浮点数坐标上导致，可尝试设置[pixelRound](ts-universal-attributes-layout-constraints.md#pixelRound11)通用属性，使产生的白线、暗线两侧的组件边界对齐到整数像素坐标上。 568 569```ts 570// xxx.ets 571@Entry 572@Component 573struct Index { 574 @State shColor: Color = Color.White; 575 @State sizeDate: number = 20; 576 @State rVal: number = 255; 577 @State gVal: number = 255; 578 @State bVal: number = 255; 579 @State aVal: number = 0.1; 580 @State rad: number = 40; 581 @State satVal: number = 0.8; 582 @State briVal: number = 1.5; 583 build() { 584 Stack() { 585 Image($r('app.media.image')) 586 Column() { 587 Column({ space: 0 }) { 588 Column() { 589 Text('11') 590 .fontSize(144) 591 .fontWeight(FontWeight.Bold) 592 .fontColor('rgba(255,255,255,1)') 593 .fontFamily('HarmonyOS-Sans-Digit') 594 .maxLines(1) 595 .lineHeight(120 * 1.25) 596 .height(120 * 1.25) 597 .letterSpacing(4 * 1.25) 598 Text('42') 599 .fontSize(144) 600 .fontWeight(FontWeight.Bold) 601 .fontColor('rgba(255,255,255,1)') 602 .fontFamily('HarmonyOS-Sans-Digit') 603 .maxLines(1) 604 .lineHeight(120 * 1.25) 605 .height(120 * 1.25) 606 .letterSpacing(4 * 1.25) 607 .shadow({ 608 color: 'rgba(0,0,0,0)', 609 radius: 20, 610 offsetX: 0, 611 offsetY: 0 612 }) 613 Row() { 614 Text('10月16日') 615 .fontSize(this.sizeDate) 616 .height(22) 617 .fontWeight('medium') 618 .fontColor('rgba(255,255,255,1)') 619 Text('星期一') 620 .fontSize(this.sizeDate) 621 .height(22) 622 .fontWeight('medium') 623 .fontColor('rgba(255,255,255,1)') 624 } 625 } 626 .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 627 .pixelRound({ 628 start: PixelRoundCalcPolicy.FORCE_FLOOR , 629 top: PixelRoundCalcPolicy.FORCE_FLOOR , 630 end: PixelRoundCalcPolicy.FORCE_CEIL, 631 bottom: PixelRoundCalcPolicy.FORCE_CEIL 632 }) 633 } 634 .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 635 .backgroundEffect({ 636 radius: this.rad, 637 saturation: this.satVal, 638 brightness: this.briVal, 639 color: this.getVolumeDialogWindowColor() 640 }) 641 .justifyContent(FlexAlign.Center) 642 .pixelRound({ 643 start: PixelRoundCalcPolicy.FORCE_FLOOR , 644 top: PixelRoundCalcPolicy.FORCE_FLOOR , 645 end: PixelRoundCalcPolicy.FORCE_CEIL, 646 bottom: PixelRoundCalcPolicy.FORCE_CEIL 647 }) 648 } 649 } 650 } 651 getVolumeDialogWindowColor(): ResourceColor | string { 652 return `rgba(${this.rVal.toFixed(0)}, ${this.gVal.toFixed(0)}, ${this.bVal.toFixed(0)}, ${this.aVal.toFixed(0)})`; 653 } 654} 655``` 656 657 658 659### 示例7 660通过 InvertOptions 实现反色。 661```ts 662// xxx.ets 663 @Entry 664 @Component 665 struct Index { 666 build() { 667 Stack() { 668 Column() 669 Stack(){ 670 Image($r('app.media.r')).width('100%') 671 Column(){ 672 Column().width("100%").height(30).invert({ 673 low:0, 674 high:1, 675 threshold:0.5, 676 thresholdRange:0.2 677 }) 678 Column().width("100%").height(30).invert({ 679 low:0.2, 680 high:0.5, 681 threshold:0.3, 682 thresholdRange:0.2 683 }) 684 } 685 } 686 .width('100%') 687 .height('100%') 688 } 689 } 690 } 691 692``` 693 694 695 696### 示例8 697useShadowBatching搭配shadow实现同层阴影不重叠效果。 698```ts 699// xxx.ets 700@Entry 701@Component 702struct UseShadowBatchingExample { 703 build() { 704 Column() { 705 Column({ space: 10 }) { 706 Stack() { 707 708 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 709 .shadow({ radius: 120, color: Color.Green, offsetX: 0, offsetY: 0 }) 710 .align(Alignment.TopStart).shadow({ radius: 120, color: Color.Green, offsetX: 0, offsetY: 0 }) 711 712 Stack() { 713 714 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 715 .align(Alignment.TopStart).shadow({ radius: 120, color: Color.Red, offsetX: 0, offsetY: 0 }) 716 .width('90%') 717 .backgroundColor(Color.White) 718 719 Column() { 720 Text() 721 .fontWeight(FontWeight.Bold) 722 .fontSize(20) 723 .fontColor(Color.White) 724 } 725 .justifyContent(FlexAlign.Center) 726 .width(150) 727 .height(150) 728 .borderRadius(10) 729 .backgroundColor(0xf56c6c) 730 .shadow({ radius: 300, color: Color.Yellow, offsetX: 0, offsetY: 0 }) 731 732 Column() { 733 Text() 734 .fontWeight(FontWeight.Bold) 735 .fontSize(20) 736 .fontColor(Color.White) 737 } 738 .justifyContent(FlexAlign.Center) 739 .width(150) 740 .height(150) 741 .backgroundColor(0x67C23A) 742 .borderRadius(10) 743 .translate({ y: -50}) 744 .shadow({ radius: 220, color: Color.Blue, offsetX: 0, offsetY: 0 }) 745 } 746 .useShadowBatching(true) 747 } 748 .width('100%').margin({ top: 5 }) 749 } 750} 751``` 752 753 754
