1# 图像效果 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9设置组件的模糊、阴影、球面效果以及设置图片的图像效果。 10 11> **说明：** 12> 13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## blur 16 17blur(value: number, options?: BlurOptions): T 18 19为组件添加内容模糊效果。 20 21**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 22 23**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 说明 | 30| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 31| value | number | 是 | 当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | 32| options<sup>11+</sup> | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | 否 | 灰阶梯参数。 | 33 34**返回值：** 35 36| 类型 | 说明 | 37| ------ | ------------------------ | 38| T | 返回当前组件。 | 39 40## blur<sup>18+</sup> 41 42blur(blurRadius: Optional\<number>, options?: BlurOptions): T 43 44为组件添加内容模糊效果。与[blur](#blur)相比，blurRadius参数新增了对undefined类型的支持。 45 46**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 47 48**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52**参数：** 53 54| 参数名 | 类型 | 必填 | 说明 | 55| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 56| blurRadius | Optional\<number> | 是 | 当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>当blurRadius的值为undefined时，维持之前取值。 | 57| options | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | 否 | 灰阶梯参数。 | 58 59**返回值：** 60 61| 类型 | 说明 | 62| ------ | ------------------------ | 63| T | 返回当前组件。 | 64 65## blur<sup>19+</sup> 66 67blur(blurRadius: Optional\<number>, options?: BlurOptions, sysOptions?: SystemAdaptiveOptions): T 68 69为组件添加内容模糊效果。与[blur<sup>18+</sup>](#blur18)相比，新增了sysOptions参数，即支持系统自适应调节参数。 70 71**卡片能力：** 从API version 19开始，该接口支持在ArkTS卡片中使用。 72 73**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 74 75**系统能力：** SystemCapability.ArkUI.ArkUI.Full 76 77**参数：** 78 79| 参数名 | 类型 | 必填 | 说明 | 80| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 81| blurRadius | Optional\<number> | 是 | 当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>当blurRadius的值为undefined时，维持之前取值。 | 82| options | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | 否 | 灰阶梯参数。 | 83| sysOptions | [SystemAdaptiveOptions](ts-universal-attributes-background.md#systemadaptiveoptions19) | 否 | 系统自适应调节参数。<br/>默认值：{ disableSystemAdaptation: false } | 84 85**返回值：** 86 87| 类型 | 说明 | 88| ------ | ------------------------ | 89| T | 返回当前组件。 | 90 91## shadow 92 93shadow(value: ShadowOptions | ShadowStyle): T 94 95为组件添加阴影效果。 96 97**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10枚举说明)类型。 98 99**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 100 101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 102 103**参数：** 104 105| 参数名 | 类型 | 必填 | 说明 | 106| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 107| value | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)<sup>10+</sup> | 是 | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>入参类型为ShadowStyle时，可指定不同阴影样式。 | 108 109**返回值：** 110 111| 类型 | 说明 | 112| ------ | ------------------------ | 113| T | 返回当前组件。 | 114 115## shadow<sup>18+</sup> 116 117shadow(options: Optional\<ShadowOptions | ShadowStyle>): T 118 119为组件添加阴影效果。与[shadow](#shadow)相比，options参数新增了对undefined类型的支持。 120 121**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10枚举说明)类型。 122 123**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 124 125**系统能力：** SystemCapability.ArkUI.ArkUI.Full 126 127**参数：** 128 129| 参数名 | 类型 | 必填 | 说明 | 130| ------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---- | 131| options | Optional\<[ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)<sup>10+</sup>> | 是 | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>入参类型为ShadowStyle时，可指定不同阴影样式。<br/>当options的值为undefined时，恢复为无样式的阴影效果。 | 132 133**返回值：** 134 135| 类型 | 说明 | 136| ------ | ------------------------ | 137| T | 返回当前组件。 | 138 139## grayscale 140 141grayscale(value: number): T 142 143为组件添加灰度效果。 144 145**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 146 147**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 148 149**系统能力：** SystemCapability.ArkUI.ArkUI.Full 150 151**参数：** 152 153| 参数名 | 类型 | 必填 | 说明 | 154| ------ | ------ | ---- | ------------------------------------------------------------ | 155| 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处理。 | 156 157**返回值：** 158 159| 类型 | 说明 | 160| ------ | ------------------------ | 161| T | 返回当前组件。 | 162 163## grayscale<sup>18+</sup> 164 165grayscale(grayscale: Optional\<number>): T 166 167为组件添加灰度效果。与[grayscale](#grayscale)相比，grayscale参数新增了对undefined类型的支持。 168 169**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 170 171**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 172 173**系统能力：** SystemCapability.ArkUI.ArkUI.Full 174 175**参数：** 176 177| 参数名 | 类型 | 必填 | 说明 | 178| --------- | ----------------- | ---- | ------------------------------------------------------------ | 179| grayscale | Optional\<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处理。<br/>当grayscale的值为undefined时，取默认值0.0。恢复为无灰度效果。 | 180 181**返回值：** 182 183| 类型 | 说明 | 184| ------ | ------------------------ | 185| T | 返回当前组件。 | 186 187## brightness 188 189brightness(value: number): T 190 191为组件添加高光效果。 192 193**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 194 195**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 196 197**系统能力：** SystemCapability.ArkUI.ArkUI.Full 198 199**参数：** 200 201| 参数名 | 类型 | 必填 | 说明 | 202| ------ | ------ | ---- | ------------------------------------------------------------ | 203| value | number | 是 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，小于或等于0为全黑，大于1时亮度增加，数值越大亮度越大，亮度大于或等于2时会变为全白。<br/>默认值：1.0 <br/>取值范围：[0, +∞)<br/>推荐取值范围：[0, 2]<br/>**说明：**<br/>设置小于0的值时，按值为0处理。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 204 205**返回值：** 206 207| 类型 | 说明 | 208| ------ | ------------------------ | 209| T | 返回当前组件。 | 210 211## brightness<sup>18+</sup> 212 213brightness(brightness: Optional\<number>): T 214 215为组件添加高光效果。与[brightness](#brightness)相比，brightness参数新增了对undefined类型的支持。 216 217**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 218 219**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 220 221**系统能力：** SystemCapability.ArkUI.ArkUI.Full 222 223**参数：** 224 225| 参数名 | 类型 | 必填 | 说明 | 226| ---------- | ----------------- | ---- | ------------------------------------------------------------ | 227| brightness | Optional\<number> | 是 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，小于或等于0为全黑，大于1时亮度增加，数值越大亮度越大，亮度大于或等于2时会变为全白。<br/>默认值：1.0<br/>取值范围：[0, +∞)<br/>推荐取值范围：[0, 2]<br/>**说明：**<br/>设置小于0的值时，按值为0处理。<br/>当brightness的值为undefined时，恢复为亮度为1的高光效果。 | 228 229**返回值：** 230 231| 类型 | 说明 | 232| ------ | ------------------------ | 233| T | 返回当前组件。 | 234 235## saturate 236 237saturate(value: number): T 238 239为组件添加饱和度效果。 240 241**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 242 243**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 244 245**系统能力：** SystemCapability.ArkUI.ArkUI.Full 246 247**参数：** 248 249| 参数名 | 类型 | 必填 | 说明 | 250| ------ | ------ | ---- | ------------------------------------------------------------ | 251| value | number | 是 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）<br/>默认值：1.0<br/>推荐取值范围：[0, 50)<br/>**说明：**<br/>设置小于0的值时，按值为0处理。 | 252 253**返回值：** 254 255| 类型 | 说明 | 256| ------ | ------------------------ | 257| T | 返回当前组件。 | 258 259## saturate<sup>18+</sup> 260 261saturate(saturate: Optional\<number>): T 262 263为组件添加饱和度效果。与[saturate](#saturate)相比，saturate参数新增了对undefined类型的支持。 264 265**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 266 267**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 268 269**系统能力：** SystemCapability.ArkUI.ArkUI.Full 270 271**参数：** 272 273| 参数名 | 类型 | 必填 | 说明 | 274| -------- | ----------------- | ---- | ------------------------------------------------------------ | 275| saturate | Optional\<number> | 是 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）<br/>默认值：1.0<br/>推荐取值范围：[0, 50)<br/>**说明：**<br/>设置小于0的值时，按值为0处理。<br/>当saturate的值为undefined时。恢复为饱和度为1的效果。 | 276 277**返回值：** 278 279| 类型 | 说明 | 280| ------ | ------------------------ | 281| T | 返回当前组件。 | 282 283## contrast 284 285contrast(value: number): T 286 287为组件添加对比度效果。 288 289**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 290 291**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 292 293**系统能力：** SystemCapability.ArkUI.ArkUI.Full 294 295**参数：** 296 297| 参数名 | 类型 | 必填 | 说明 | 298| ------ | ------ | ---- | ------------------------------------------------------------ | 299| value | number | 是 | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）<br/>默认值：1.0<br/>推荐取值范围：[0, 10)<br/>**说明：**<br/>设置小于0的值时，按值为0处理。 | 300 301**返回值：** 302 303| 类型 | 说明 | 304| ------ | ------------------------ | 305| T | 返回当前组件。 | 306 307## contrast<sup>18+</sup> 308 309contrast(contrast: Optional\<number>): T 310 311为组件添加对比度效果。与[contrast](#contrast)相比，contrast参数新增了对undefined类型的支持。 312 313**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 314 315**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 316 317**系统能力：** SystemCapability.ArkUI.ArkUI.Full 318 319**参数：** 320 321| 参数名 | 类型 | 必填 | 说明 | 322| -------- | ----------------- | ---- | ------------------------------------------------------------ | 323| contrast | Optional\<number> | 是 | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）<br/>默认值：1.0<br/>推荐取值范围：[0, 10)<br/>**说明：**<br/>设置小于0的值时，按值为0处理。<br/>当contrast的值为undefined时，恢复为对比度为1的效果。 | 324 325**返回值：** 326 327| 类型 | 说明 | 328| ------ | ------------------------ | 329| T | 返回当前组件。 | 330 331## invert 332 333invert(value: number | InvertOptions): T 334 335反转输入的图像。 336 337**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 338 339**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 340 341**系统能力：** SystemCapability.ArkUI.ArkUI.Full 342 343**参数：** 344 345| 参数名 | 类型 | 必填 | 说明 | 346| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 347| value | number \| [InvertOptions](#invertoptions11对象说明)<sup>11+</sup> | 是 | 反转输入的图像。<br/>入参对象为number时,入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）<br/>取值范围：[0, 1]。<br/>设置小于0的值时，按值为0处理。设置大于1的值时，按值为1处理。<br/>入参对象为 InvertOptions时，对比背景颜色灰度值和阈值区间，背景颜色灰度值小于阈值区间时反色取high值，当背景颜色灰度值大于阈值区间时反色取low值，背景颜色灰度值在阈值区间内取值由high线性渐变到low。 | 348 349**返回值：** 350 351| 类型 | 说明 | 352| ------ | ------------------------ | 353| T | 返回当前组件。 | 354 355## invert<sup>18+</sup> 356 357invert(options: Optional\<number | InvertOptions>): T 358 359反转输入的图像。与[invert](#invert)相比，options参数新增了对undefined类型的支持。 360 361**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 362 363**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 364 365**系统能力：** SystemCapability.ArkUI.ArkUI.Full 366 367**参数：** 368 369| 参数名 | 类型 | 必填 | 说明 | 370| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 371| options | Optional\<number \| [InvertOptions](#invertoptions11对象说明)<sup>11+</sup>> | 是 | 反转输入的图像。<br/>入参对象为number时,入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）<br/>取值范围：[0, 1]。<br/>设置小于0的值时，按值为0处理。设置大于1的值时，按值为1处理。<br/>入参对象为 InvertOptions时，对比背景颜色灰度值和阈值区间，背景颜色灰度值小于阈值区间时反色取high值，当背景颜色灰度值大于阈值区间时反色取low值，背景颜色灰度值在阈值区间内取值由high线性渐变到low。<br/>当options的值为undefined时，恢复为图像无变化的效果。 | 372 373**返回值：** 374 375| 类型 | 说明 | 376| ------ | ------------------------ | 377| T | 返回当前组件。 | 378 379## sepia 380 381sepia(value: number): T 382 383将图像转换为深褐色。 384 385**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 386 387**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 388 389**系统能力：** SystemCapability.ArkUI.ArkUI.Full 390 391**参数：** 392 393| 参数名 | 类型 | 必填 | 说明 | 394| ------ | ------ | ---- | ------------------------------------------------------------ | 395| value | number | 是 | 将图像转换为深褐色，降低色彩度，产生温暖复古的图像风格。入参为褐色滤镜强度，值为1则完全是深褐色的，值小于等于0则图像无变化，值大于1会进一步放大色彩偏移比例，图像整体会变得更亮且色彩更加偏黄/偏红，但不属于标准sepia效果。（百分比）<br/>取值范围：[0, +∞)，推荐取值范围：(0, 1]。 | 396 397**返回值：** 398 399| 类型 | 说明 | 400| ------ | ------------------------ | 401| T | 返回当前组件。 | 402 403## sepia<sup>18+</sup> 404 405sepia(sepia: Optional\<number>): T 406 407将图像转换为深褐色。与[sepia](#sepia)相比，sepia参数新增了对undefined类型的支持。 408 409**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 410 411**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 412 413**系统能力：** SystemCapability.ArkUI.ArkUI.Full 414 415**参数：** 416 417| 参数名 | 类型 | 必填 | 说明 | 418| ------ | ----------------- | ---- | ------------------------------------------------------------ | 419| sepia | Optional\<number> | 是 | 将图像转换为深褐色，降低色彩度，产生温暖复古的图像风格。入参为褐色滤镜强度，值为1则完全是深褐色的，值小于等于0则图像无变化，值大于1会进一步放大色彩偏移比例，图像整体会变得更亮且色彩更加偏黄/偏红，但不属于标准sepia效果。（百分比）<br/>当sepia的值为undefined时，恢复为图像无变化的效果。<br/> 取值范围：[0, +∞)，推荐取值范围：(0, 1]。 | 420 421**返回值：** 422 423| 类型 | 说明 | 424| ------ | ------------------------ | 425| T | 返回当前组件。 | 426 427## hueRotate 428 429hueRotate(value: number | string): T 430 431色相旋转效果。 432 433**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 434 435**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 436 437**系统能力：** SystemCapability.ArkUI.ArkUI.Full 438 439**参数：** 440 441| 参数名 | 类型 | 必填 | 说明 | 442| ------ | -------------------------- | ---- | ------------------------------------------------------------ | 443| value | number \| string | 是 | 色相旋转效果，输入参数为旋转角度。<br/>默认值：'0deg'<br/>取值范围：(-∞, +∞)<br/>**说明：**<br/>色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。 | 444 445**返回值：** 446 447| 类型 | 说明 | 448| ------ | ------------------------ | 449| T | 返回当前组件。 | 450 451## hueRotate<sup>18+</sup> 452 453hueRotate(rotation: Optional\<number | string>): T 454 455色相旋转效果。与[hueRotate](#huerotate)相比，rotation参数新增了对undefined类型的支持。 456 457**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 458 459**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 460 461**系统能力：** SystemCapability.ArkUI.ArkUI.Full 462 463**参数：** 464 465| 参数名 | 类型 | 必填 | 说明 | 466| -------- | ------------------------------------- | ------------------------------------------------------------ | ---- | 467| rotation | Optional\<number \| string> | 是 |色相旋转效果，输入参数为旋转角度。<br/>默认值：'0deg'<br/>取值范围：(-∞, +∞)<br/>string需为数值字符串类型。<br/>**说明：**<br/>色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。<br/>当rotation的值为undefined时，恢复为无色相旋转的效果。 | 468 469**返回值：** 470 471| 类型 | 说明 | 472| ------ | ------------------------ | 473| T | 返回当前组件。 | 474 475## colorBlend<sup>7+</sup> 476 477colorBlend(value: Color | string | Resource): T 478 479为组件添加颜色叠加效果。 480 481**系统能力：** SystemCapability.ArkUI.ArkUI.Full 482 483**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 484 485**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 486 487**参数：** 488 489| 参数名 | 类型 | 必填 | 说明 | 490| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------- | 491| value | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | 是 | 为当前组件添加颜色叠加效果，入参为叠加的颜色字符串。取值可为string类型，如'0x000000'，'rgba(0,0,0,1)'。 | 492 493**返回值：** 494 495| 类型 | 说明 | 496| ------ | ------------------------ | 497| T | 返回当前组件。 | 498 499## colorBlend<sup>18+</sup> 500 501colorBlend(color: Optional\<Color | string | Resource>): T 502 503为组件添加颜色叠加效果。取值可为string类型，如'0x000000'，'rgba(0,0,0,1)'。与[colorBlend<sup>7+</sup>](#colorblend7)相比，color参数新增了对undefined类型的支持。 504 505**系统能力：** SystemCapability.ArkUI.ArkUI.Full 506 507**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 508 509**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 510 511**参数：** 512 513| 参数名 | 类型 | 必填 | 说明 | 514| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 515| color | Optional\<[Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource)> | 是 | 为当前组件添加颜色叠加效果，入参为叠加的颜色。<br/>当color的值为undefined时，恢复为无颜色叠加的效果。 | 516 517**返回值：** 518 519| 类型 | 说明 | 520| ------ | ------------------------ | 521| T | 返回当前组件。 | 522 523## linearGradientBlur<sup>12+</sup> 524 525linearGradientBlur(value: number, options: LinearGradientBlurOptions): T 526 527为组件添加内容线性渐变模糊效果。 528 529**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 530 531**系统能力：** SystemCapability.ArkUI.ArkUI.Full 532 533**参数：** 534 535| 参数名 | 类型 | 必填 | 说明 | 536| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 537| value | number | 是 | 为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>取值范围：[0, 1000] | 538| options | [LinearGradientBlurOptions](#lineargradientbluroptions12对象说明) | 是 | 设置线性渐变模糊效果。 <br/>线性梯度模糊包含[fractionStops](#lineargradientbluroptions12对象说明)和[direction](#lineargradientbluroptions12对象说明)。 | 539 540**返回值：** 541 542| 类型 | 说明 | 543| ------ | ------------------------ | 544| T | 返回当前组件。 | 545 546## linearGradientBlur<sup>18+</sup> 547 548linearGradientBlur(blurRadius: Optional\<number>, options: Optional\<LinearGradientBlurOptions>): T 549 550为组件添加内容线性渐变模糊效果。与[linearGradientBlur<sup>12+</sup>](#lineargradientblur12)相比，value参数新增了对undefined类型的支持。 551 552**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 553 554**系统能力：** SystemCapability.ArkUI.ArkUI.Full 555 556**参数：** 557 558| 参数名 | 类型 | 必填 | 说明 | 559| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 560| blurRadius | Optional\<number> | 是 | 为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>取值范围：[0, 1000]<br/>当blurRadius的值为undefined时，恢复为渐变模糊为0的效果。 | 561| options | Optional\<[LinearGradientBlurOptions](#lineargradientbluroptions12对象说明)> | 是 | 设置线性渐变模糊效果。<br/>当options的值为undefined时，恢复为渐变模糊为0的效果。<br/>线性梯度模糊包含[fractionStops](#lineargradientbluroptions12对象说明)和[direction](#lineargradientbluroptions12对象说明)。 | 562 563**返回值：** 564 565| 类型 | 说明 | 566| ------ | ------------------------ | 567| T | 返回当前组件。 | 568 569## renderGroup<sup>10+</sup> 570 571renderGroup(value: boolean): T 572 573设置当前控件和子控件是否先整体离屏渲染绘制后再与父控件融合绘制。 574 575**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 576 577**系统能力：** SystemCapability.ArkUI.ArkUI.Full 578 579**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 580 581**参数：** 582 583| 参数名 | 类型 | 必填 | 说明 | 584| ------ | ------- | ---- | ------------------------------------------------------------ | 585| value | boolean | 是 | 设置当前控件和子控件是否先整体离屏渲染绘制后再与父控件融合绘制。当前控件的不透明度不为1时绘制效果可能有差异。<br/>默认值：false <br/> false表示不进行离屏渲染直接绘制。 | 586 587**返回值：** 588 589| 类型 | 说明 | 590| ------ | ------------------------ | 591| T | 返回当前组件。 | 592 593## renderGroup<sup>18+</sup> 594 595renderGroup(isGroup: Optional\<boolean>): T 596 597设置当前控件和子控件是否先整体离屏渲染绘制后再与父控件融合绘制。与[renderGroup<sup>10+</sup>](#rendergroup10)相比，isGroup参数新增了对undefined类型的支持。 598 599**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 600 601**系统能力：** SystemCapability.ArkUI.ArkUI.Full 602 603**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 604 605**参数：** 606 607| 参数名 | 类型 | 必填 | 说明 | 608| ------- | ------------------ | ---- | ------------------------------------------------------------ | 609| isGroup | Optional\<boolean> | 是 | 设置当前控件和子控件是否先整体离屏渲染绘制后再与父控件融合绘制。当前控件的不透明度不为1时绘制效果可能有差异。<br/>默认值：false<br/>当isGroup的值为undefined时，恢复为不开启整体离屏渲染绘制后再与父控件融合绘制的效果。 | 610 611**返回值：** 612 613| 类型 | 说明 | 614| ------ | ------------------------ | 615| T | 返回当前组件。 | 616 617## blendMode<sup>11+</sup> 618 619blendMode(value: BlendMode, type?: BlendApplyType): T 620 621将当前控件的内容（包含子节点内容）与下方画布（可能为离屏画布）已有内容进行混合。 622 623**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 624 625**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 626 627**系统能力：** SystemCapability.ArkUI.ArkUI.Full 628 629**参数：** 630 631| 参数名 | 类型 | 必填 | 说明 | 632| ------ | ----------------------------------- | ---- | ------------------------------------------------------------ | 633| value | [BlendMode](#blendmode11枚举说明) | 是 | 混合模式。<br/>默认值：BlendMode.NONE<br/>**说明：**<br/>混合模式设置为BlendMode.NONE时，blend效果实际为默认的BlendMode.SRC_OVER，且BlendApplyType不生效。 | 634| type | [BlendApplyType](#blendapplytype11枚举说明) | 否 | blendMode实现方式是否离屏。<br/>默认值：BlendApplyType.FAST<br/>**说明：**<br/>1. 设置BlendApplyType.FAST时，不离屏。<br/>2. 设置BlendApplyType.OFFSCREEN时，会创建当前组件大小的离屏画布，再将当前组件（含子组件）的内容绘制到离屏画布上，再用指定的混合模式与下方画布已有内容进行混合。使用该实现方式时，将导致[linearGradientBlur<sup>12+</sup>](#lineargradientblur12)、[backgroundEffect](ts-universal-attributes-background.md#backgroundeffect11)、[brightness](#brightness)、[blur](#blur)等需要截屏的接口无法截取到正确的画面。 | 635 636**返回值：** 637 638| 类型 | 说明 | 639| ------ | ------------------------ | 640| T | 返回当前组件。 | 641 642## blendMode<sup>18+</sup> 643 644blendMode(mode: Optional\<BlendMode>, type?: BlendApplyType): T 645 646将当前控件的内容（包含子节点内容）与下方画布（可能为离屏画布）已有内容进行混合。与[blendMode<sup>11+</sup>](#blendmode11)相比，mode参数新增了对undefined类型的支持。 647 648**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 649 650**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 651 652**系统能力：** SystemCapability.ArkUI.ArkUI.Full 653 654**参数：** 655 656| 参数名 | 类型 | 必填 | 说明 | 657| ------ | ------------------------------- | ---- | ------------------------------------------------------------ | 658| mode | Optional\<[BlendMode](#blendmode11枚举说明)> | 是 | 混合模式。<br/>默认值：BlendMode.NONE<br/>当mode的值为undefined时，恢复为内容不进行混合的效果。<br/>**说明：**<br/>混合模式设置为BlendMode.NONE时，blend效果实际为默认的BlendMode.SRC_OVER，且BlendApplyType不生效。 | 659| type | [BlendApplyType](#blendapplytype11枚举说明) | 否 | blendMode实现方式是否离屏。<br/>默认值：BlendApplyType.FAST<br/>**说明：**<br/>1. 设置BlendApplyType.FAST时，不离屏。<br/>2. 设置BlendApplyType.OFFSCREEN时，会创建当前组件大小的离屏画布，再将当前组件（含子组件）的内容绘制到离屏画布上，再用指定的混合模式与下方画布已有内容进行混合。使用该实现方式时，将导致[linearGradientBlur<sup>12+</sup>](#lineargradientblur12)、[backgroundEffect](ts-universal-attributes-background.md#backgroundeffect11)、[brightness](#brightness)、[blur](#blur)等需要截屏的接口无法截取到正确的画面。| 660 661**返回值：** 662 663| 类型 | 说明 | 664| ------ | ------------------------ | 665| T | 返回当前组件。 | 666 667## BlendApplyType<sup>11+</sup>枚举说明 668 669指示如何将指定的混合模式应用于视图的内容。 670 671**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 672 673**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 674 675**系统能力：** SystemCapability.ArkUI.ArkUI.Full 676 677| 名称 | 值 | 说明 | 678| ---------------| ------ | ---------------------------------------------------------------- | 679| FAST | 0 | 在目标图像上按顺序混合视图的内容。 | 680| OFFSCREEN | 1 | 将此组件和子组件内容绘制到离屏画布上，然后整体进行混合。 | 681 682## useShadowBatching<sup>11+</sup> 683 684useShadowBatching(value: boolean): T 685 686控件内部子节点的阴影进行同层绘制，同层元素阴影重叠。 687 688**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 689 690**系统能力：** SystemCapability.ArkUI.ArkUI.Full 691 692**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 693 694**参数：** 695 696| 参数名 | 类型 | 必填 | 说明 | 697| ------ | ------- | ---- | ------------------------------------------------------------ | 698| value | boolean | 是 | 控件内部子节点的阴影进行同层绘制，同层元素阴影重叠。<br/>默认值：false<br/>**说明：**<br/>1. 默认不开启，如果子节点的阴影半径较大，节点各自的阴影会互相重叠。 当开启时，元素的阴影将不会重叠。<br/>2. 不推荐useShadowBatching嵌套使用，如果嵌套使用，只会对当前的子节点生效，无法递推。 | 699 700**返回值：** 701 702| 类型 | 说明 | 703| ------ | ------------------------ | 704| T | 返回当前组件。 | 705 706## useShadowBatching<sup>18+</sup> 707 708useShadowBatching(use: Optional\<boolean>): T 709 710控件内部子节点的阴影进行同层绘制，同层元素阴影重叠。与[useShadowBatching<sup>11+</sup>](#useshadowbatching11)相比，use参数新增了对undefined类型的支持。 711 712**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 713 714**系统能力：** SystemCapability.ArkUI.ArkUI.Full 715 716**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 717 718**参数：** 719 720| 参数名 | 类型 | 必填 | 说明 | 721| ------ | ------------------ | ---- | ------------------------------------------------------------ | 722| use | Optional\<boolean> | 是 | 控件内部子节点的阴影进行同层绘制，同层元素阴影重叠。<br/>默认值：false<br/>**说明：**<br/>1. 默认不开启，如果子节点的阴影半径较大，节点各自的阴影会互相重叠。 当开启时，元素的阴影将不会重叠。<br/>2. 不推荐useShadowBatching嵌套使用，如果嵌套使用，只会对当前的子节点生效，无法递推。<br/>当use的值为undefined时，恢复为不使用元素阴影重叠的效果。 | 723 724**返回值：** 725 726| 类型 | 说明 | 727| ------ | ------------------------ | 728| T | 返回当前组件。 | 729 730## sphericalEffect<sup>12+</sup> 731 732sphericalEffect(value: number): T 733 734设置组件的图像球面化程度。 735 736**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 737 738**系统能力：** SystemCapability.ArkUI.ArkUI.Full 739 740**参数：** 741 742| 参数名 | 类型 | 必填 | 说明 | 743| ------ | ------ | ---- | ------------------------------------------------------------ | 744| value | number | 是 | 设置组件的图像球面化程度。<br/>取值范围：[0,1]。<br/>**说明：**<br/>1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。<br/>`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。<br/>2. 组件阴影和外描边不支持球面效果。<br>3. 设置value大于0时，组件冻屏不更新并且把组件内容绘制到透明离屏buffer上，如果要更新组件属性则需要把value设置为0。 | 745 746**返回值：** 747 748| 类型 | 说明 | 749| ------ | ------------------------ | 750| T | 返回当前组件。 | 751 752## sphericalEffect<sup>18+</sup> 753 754sphericalEffect(effect: Optional\<number>): T 755 756设置组件的图像球面化程度。与[sphericalEffect<sup>12+</sup>](#sphericaleffect12)相比，effect参数新增了对undefined类型的支持。 757 758**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 759 760**系统能力：** SystemCapability.ArkUI.ArkUI.Full 761 762**参数：** 763 764| 参数名 | 类型 | 必填 | 说明 | 765| ------ | ----------------- | ---- | ------------------------------------------------------------ | 766| effect | Optional\<number> | 是 | 设置组件的图像球面化程度。<br/>取值范围：[0,1]。<br/>**说明：**<br/>1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。<br/>`effect < 0 `或者` effect > 1`为异常情况，`effect < 0`按0处理，`effect > 1`按1处理。<br/>2. 组件阴影和外描边不支持球面效果。<br/>3. 设置effect大于0时，组件冻屏不更新并且把组件内容绘制到透明离屏buffer上，如果要更新组件属性则需要把effect设置为0。<br/>当effect的值为undefined时，恢复为图像球面化程度为0的效果。 | 767 768**返回值：** 769 770| 类型 | 说明 | 771| ------ | ------------------------ | 772| T | 返回当前组件。 | 773 774## lightUpEffect<sup>12+</sup> 775 776lightUpEffect(value: number): T 777 778设置组件图像亮起程度。 779 780**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 781 782**系统能力：** SystemCapability.ArkUI.ArkUI.Full 783 784**参数：** 785 786| 参数名 | 类型 | 必填 | 说明 | 787| ------ | ------ | ---- | ------------------------------------------------------------ | 788| value | number | 是 | 设置组件图像亮起程度。<br/>取值范围：[0,1]。<br/>如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。 | 789 790**返回值：** 791 792| 类型 | 说明 | 793| ------ | ------------------------ | 794| T | 返回当前组件。 | 795 796## lightUpEffect<sup>18+</sup> 797 798lightUpEffect(degree: Optional\<number>): T 799 800设置组件图像亮起程度。与[lightUpEffect<sup>12+</sup>](#lightupeffect12)相比，degree参数新增了对undefined类型的支持。 801 802**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 803 804**系统能力：** SystemCapability.ArkUI.ArkUI.Full 805 806**参数：** 807 808| 参数名 | 类型 | 必填 | 说明 | 809| ------ | ----------------- | ---- | ------------------------------------------------------------ | 810| degree | Optional\<number> | 是 | 设置组件图像亮起程度。<br/>取值范围：[0,1]。<br/>如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。`degree < 0` 或者 `degree > 1`为异常情况，`degree < 0`按0处理，`degree > 1`按1处理。<br/>当degree的值为undefined时，恢复为亮起为1的效果。 | 811 812**返回值：** 813 814| 类型 | 说明 | 815| ------ | ------------------------ | 816| T | 返回当前组件。 | 817 818## pixelStretchEffect<sup>12+</sup> 819 820pixelStretchEffect(options: PixelStretchEffectOptions): T 821 822设置组件的图像边缘像素扩展距离。 823 824**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 825 826**系统能力：** SystemCapability.ArkUI.ArkUI.Full 827 828**参数：** 829 830| 参数名 | 类型 | 必填 | 说明 | 831| ------- | --------------------------------------------------------- | ---- | ------------------------------------------------------------ | 832| options | [PixelStretchEffectOptions](#pixelstretcheffectoptions10) | 是 | 设置组件的图像边缘像素扩展距离。<br/>参数`options`包括上下左右四个方向的边缘像素扩展距离。<br/>**说明：**<br/>1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。<br/>2. 如果距离为负值，表示内缩，但是最终图像大小不变。<br/>内缩方式：<br/>图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。<br/>图像用边缘像素扩展到原来大小。<br/>3. 对`options`的输入约束：<br/>上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。<br/>所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。<br/>所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。 | 833 834**返回值：** 835 836| 类型 | 说明 | 837| ------ | ------------------------ | 838| T | 返回当前组件。 | 839 840## pixelStretchEffect<sup>18+</sup> 841 842pixelStretchEffect(options: Optional\<PixelStretchEffectOptions>): T 843 844设置组件的图像边缘像素扩展距离。与[pixelStretchEffect<sup>12+</sup>](#pixelstretcheffect12)相比，options参数新增了对undefined类型的支持。 845 846**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 847 848**系统能力：** SystemCapability.ArkUI.ArkUI.Full 849 850**参数：** 851 852| 参数名 | 类型 | 必填 | 说明 | 853| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 854| options | Optional\<[PixelStretchEffectOptions](#pixelstretcheffectoptions10)> | 是 | 设置组件的图像边缘像素扩展距离。<br/>参数`options`包括上下左右四个方向的边缘像素扩展距离。<br/>**说明：**<br/>1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。<br/>2. 如果距离为负值，表示内缩，但是最终图像大小不变。<br/>内缩方式：<br/>图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。<br/>图像用边缘像素扩展到原来大小。<br/>3. 对`options`的输入约束：<br/>上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。<br/>所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。<br/>所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。<br/>当options的值为undefined时，恢复为无像素扩展效果。 | 855 856**返回值：** 857 858| 类型 | 说明 | 859| ------ | ------------------------ | 860| T | 返回当前组件。 | 861 862## PixelStretchEffectOptions<sup>10+</sup> 863 864像素扩展属性集合,用于描述像素扩展的信息。 865 866**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 867 868**系统能力：** SystemCapability.ArkUI.ArkUI.Full 869 870| 名称 | 类型 | 只读 | 可选 | 说明 | 871| ------ | ----------------- | ---- | ---- | -------------- | 872| left | [Length](ts-types.md#length) | 否 | 是 | 组件图像左边沿像素扩展距离。 | 873| right | [Length](ts-types.md#length) | 否 | 是 | 组件图像右边沿像素扩展距离。 | 874| top | [Length](ts-types.md#length) | 否 | 是 | 组件图像上边沿像素扩展距离。 | 875| bottom | [Length](ts-types.md#length) | 否 | 是 | 组件图像下边沿像素扩展距离。 | 876 877## systemBarEffect<sup>12+</sup> 878 879systemBarEffect(): T 880 881根据背景进行智能反色并且带有模糊效果。 882 883**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 884 885**系统能力：** SystemCapability.ArkUI.ArkUI.Full 886 887**返回值：** 888 889| 类型 | 说明 | 890| ------ | ------------------------ | 891| T | 返回当前组件。 | 892 893## ShadowType<sup>10+<sup>枚举说明 894 895阴影类型。 896 897**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 898 899**系统能力：** SystemCapability.ArkUI.ArkUI.Full 900 901| 名称 | 值 | 说明 | 902| -------- | ------ | ---------------------------------- | 903| COLOR | - | 颜色。 | 904| BLUR | - | 模糊。 | 905 906 907## ShadowOptions对象说明 908 909阴影属性集合，用于设置阴影的模糊半径、阴影的颜色、X轴和Y轴的偏移量。 910 911**系统能力：** SystemCapability.ArkUI.ArkUI.Full 912 913| 名称 | 类型 | 只读 | 可选 | 说明 | 914| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | 915| radius | number \| [Resource](ts-types.md#resource) | 否 | 否 | 阴影模糊半径。<br/>取值范围：[0, +∞)<br/>单位：px<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>如需使用vp单位的数值可用[vp2px](ts-pixel-units.md#像素单位转换)进行转换。<br/>如果radius为Resource类型，则传入的值需为number类型。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 916| type<sup>10+</sup> | [ShadowType](#shadowtype10枚举说明) | 否 | 是 | 阴影类型。<br/>默认为COLOR。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 917| color | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource)\| [ColoringStrategy<sup>11+</sup> ](ts-appendix-enums.md#coloringstrategy10) | 否 | 是 | 阴影的颜色。<br/>默认为黑色。 <br/>**说明：** <br/>从API version 11开始，该接口支持使用ColoringStrategy实现智能取色，智能取色功能不支持在ArkTS卡片、[textShadow](ts-basic-components-text.md#textshadow10)中使用。<br/>当前仅支持平均取色和主色取色，智能取色区域为shadow绘制区域。<br/>支持使用'average'字符串触发智能平均取色模式，支持使用'primary'字符串触发智能主色模式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。| 918| offsetX | number \| [Resource](ts-types.md#resource) | 否 | 是 | 阴影的X轴偏移量。<br/>默认值：0<br/>单位：px<br/>**说明：** <br/>如需使用vp单位的数值可用[vp2px](ts-pixel-units.md#像素单位转换)进行转换。<br/>如果offsetX为Resource类型，则传入的值需为number类型。<br/> **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 919| offsetY | number \| [Resource](ts-types.md#resource) | 否 | 是 | 阴影的Y轴偏移量。<br/>默认值：0<br/>单位：px<br/>**说明：** <br/>如需使用vp单位的数值可用[vp2px](ts-pixel-units.md#像素单位转换)进行转换。<br/>如果offsetY为Resource类型，则传入的值需为number类型。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。| 920| fill<sup>11+</sup> | boolean | 否 | 是 | 阴影是否内部填充。true表示阴影在内部填充，false表示阴影在外部填充。<br/>默认为false。<br/>**说明：**<br/>[textShadow](ts-basic-components-text.md#textshadow10)中该字段不生效。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 921 922## ShadowStyle<sup>10+</sup>枚举说明 923 924**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 925 926**系统能力：** SystemCapability.ArkUI.ArkUI.Full 927 928| 名称 | 值 | 说明 | 929| ----------------- | ---- | ------ | 930| OUTER_DEFAULT_XS | - | 超小阴影。 | 931| OUTER_DEFAULT_SM | - | 小阴影。 | 932| OUTER_DEFAULT_MD | - | 中阴影。 | 933| OUTER_DEFAULT_LG | - | 大阴影。 | 934| OUTER_FLOATING_SM | - | 浮动小阴影。 | 935| OUTER_FLOATING_MD | - | 浮动中阴影。 | 936 937## BlendMode<sup>11+</sup>枚举说明 938 939> **说明：** 940> 941> blendMode枚举中，s表示源像素，d表示目标像素，sa表示原像素透明度，da表示目标像素透明度，r表示混合后像素，ra表示混合后像素透明度。 942 943**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 944 945**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 946 947**系统能力：** SystemCapability.ArkUI.ArkUI.Full 948 949| 名称 | 值 | 说明 | 950| ---------------| --- | ------ | 951| NONE | 0 | 将上层图像直接覆盖到下层图像上，不进行任何混合操作。 | 952| CLEAR | 1 | 将源像素覆盖的目标像素清除为完全透明。 | 953| SRC | 2 | r = s，只显示源像素。 | 954| DST | 3 | r = d，只显示目标像素。 | 955| SRC_OVER | 4 | r = s + (1 - sa) * d，将源像素按照透明度进行混合，覆盖在目标像素上。 | 956| DST_OVER | 5 | r = d + (1 - da) * s，将目标像素按照透明度进行混合，覆盖在源像素上。 | 957| SRC_IN | 6 | r = s * da，只显示源像素中与目标像素重叠的部分。 | 958| DST_IN | 7 | r = d * sa，只显示目标像素中与源像素重叠的部分。 | 959| SRC_OUT | 8 | r = s * (1 - da)，只显示源像素中与目标像素不重叠的部分。 | 960| DST_OUT | 9 | r = d * (1 - sa)，只显示目标像素中与源像素不重叠的部分。 | 961| SRC_ATOP | 10 | r = s * da + d * (1 - sa)，在源像素和目标像素重叠的地方绘制源像素，在源像素和目标像素不重叠的地方绘制目标像素。 | 962| DST_ATOP | 11 | r = d * sa + s * (1 - da)，在源像素和目标像素重叠的地方绘制目标像素，在源像素和目标像素不重叠的地方绘制源像素。 | 963| XOR | 12 | r = s * (1 - da) + d * (1 - sa)，在源像素和目标像素重叠的地方不显示像素，不重叠的地方显示源像素和目标像素。 | 964| PLUS | 13 | r = min(s + d, 1)，将源像素值与目标像素值相加，并将结果作为新的像素值。 | 965| MODULATE | 14 | r = s * d，将源像素与目标像素进行乘法运算，并将结果作为新的像素值。 | 966| SCREEN | 15 | r = s + d - s * d，将两个图像的像素值相加，然后减去它们的乘积来实现混合。 | 967| OVERLAY | 16 | 根据目标像素来决定使用MULTIPLY混合模式还是SCREEN混合模式。 | 968| DARKEN | 17 | rc = s + d - max(s * da, d * sa), ra = kSrcOver，当两个颜色重叠时，较暗的颜色会覆盖较亮的颜色。 | 969| LIGHTEN | 18 | rc = s + d - min(s * da, d * sa), ra = kSrcOver，将源图像和目标图像中的像素进行比较，选取两者中较亮的像素作为最终的混合结果。 | 970| COLOR_DODGE | 19 | 使目标像素变得更亮来反映源像素。 | 971| COLOR_BURN | 20 | 使目标像素变得更暗来反映源像素。 | 972| HARD_LIGHT | 21 | 根据源像素的值来决定目标像素变得更亮或者更暗。根据源像素来决定使用MULTIPLY混合模式还是SCREEN混合模式。 | 973| SOFT_LIGHT | 22 | 根据源像素来决定使用LIGHTEN混合模式还是DARKEN混合模式。 | 974| DIFFERENCE | 23 | rc = s + d - 2 * (min(s * da, d * sa)), ra = kSrcOver，对比源像素和目标像素，亮度更高的像素减去亮度更低的像素，产生高对比度的效果。 | 975| EXCLUSION | 24 | rc = s + d - two(s * d), ra = kSrcOver，对比源像素和目标像素，亮度更高的像素减去亮度更低的像素，产生柔和的效果。 | 976| MULTIPLY | 25 | r = s * (1 - da) + d * (1 - sa) + s * d，将源图像与目标图像进行乘法混合，得到一张新的图像。 | 977| HUE | 26 | 保留源图像的亮度和饱和度，但会使用目标图像的色调来替换源图像的色调。 | 978| SATURATION | 27 | 保留目标像素的亮度和色调，但会使用源像素的饱和度来替换目标像素的饱和度。 | 979| COLOR | 28 | 保留源像素的饱和度和色调，但会使用目标像素的亮度来替换源像素的亮度。 | 980| LUMINOSITY | 29 | 保留目标像素的色调和饱和度，但会用源像素的亮度替换目标像素的亮度。 | 981 982## LinearGradientBlurOptions<sup>12+</sup>对象说明 983 984**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 985 986**系统能力：** SystemCapability.ArkUI.ArkUI.Full 987 988| 名称 | 类型 | 只读 | 可选 | 说明 | 989| ------------- | ----------------------------------------------------------- | ----- | ----- |------------------------------------------------------------ | 990| fractionStops | [FractionStop](#fractionstop12)[] | 否 | 否 | 数组中保存的每一个二元数组（取值0-1，小于0则为0，大于1则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效。 | 991| direction | [GradientDirection](ts-appendix-enums.md#gradientdirection) | 否 | 否 | 渐变模糊方向。<br/>默认值：<br/>GradientDirection.Bottom | 992 993## FractionStop<sup>12+</sup> 994 995type FractionStop = [ number, number ] 996 997定义模糊段。 998 999**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1000 1001**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1002 1003| 类型 | 说明 | 1004| ------------- | ---------------------------------------------------------- | 1005| number | 分数,值1表示不透明，0表示完全透明。<br/>取值范围：[0,1] | 1006| number | 停止位置,值1表示区域结束位置，0表示区域开始位置。<br/> 取值范围:[0,1] | 1007 1008## InvertOptions<sup>11+</sup>对象说明 1009 1010前景智能取反色。 1011 1012**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1013 1014**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1015 1016| 名称 | 类型 | 只读 | 可选 | 说明 | 1017| -------------- | ------ | ----- | ----- | ------------------------------------------ | 1018| low | number | 否 | 否 | 背景颜色灰度值大于阈值区间时的取值。 <br/>取值范围：[0, 1] | 1019| high | number | 否 | 否 | 背景颜色灰度值小于阈值区间时的取值。 <br/>取值范围：[0, 1] | 1020| threshold | number | 否 | 否 | 灰度阈值。 <br/>取值范围：[0, 1] | 1021| thresholdRange | number | 否 | 否 | 阈值范围。<br/>取值范围：[0, 1]<br/>**说明：**<br/>灰度阈值上下偏移thresholdRange构成阈值区间，背景颜色灰度值在区间内取值由high线性渐变到low。| 1022 1023## BackgroundImageOptions<sup>18+</sup> 1024 1025定义背景图选项。 1026 1027**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 1028 1029**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 1030 1031**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1032 1033> **说明：** 1034> 1035> 背景图片的同步加载可能会带来潜在性能问题，详情可见[Image](ts-basic-components-image.md#image-1)中说明。 1036 1037| 名称 | 类型 | 只读 | 可选 | 说明 | 1038| -------------- | ------------------------------------------------| ----- | ----- | --------------------------------------------------------| 1039| syncLoad | boolean | 否 | 是 | 是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。<br/>默认值：false，false表示异步加载图片，true表示同步加载图片。 | 1040| repeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 否 | 是 | 设置背景图片的重复样式。默认值为ImageRepeat.NoRepeat。 | 1041 1042## freeze<sup>12+</sup> 1043 1044freeze(value: boolean): T 1045 1046设置当前控件和子控件是否整体离屏渲染绘制后重复绘制缓存，不再进行内部属性更新。 1047 1048**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1049 1050**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1051 1052**参数：** 1053 1054| 参数名 | 类型 | 必填 | 说明 | 1055| ------ | ------- | ---- | ------------------------------------------------------------ | 1056| value | boolean | 是 | 设置当前控件和子控件是否整体离屏渲染绘制后重复绘制缓存，不再进行内部属性更新。当前控件的不透明度不为1时绘制效果可能有差异。<br/>默认值：false <br/> true时离屏渲染绘制后重复绘制缓存，false时离屏渲染绘制后不重复绘制缓存。| 1057 1058**返回值：** 1059 1060| 类型 | 说明 | 1061| ------ | ------------------------ | 1062| T | 返回当前组件。 | 1063 1064## freeze<sup>18+</sup> 1065 1066freeze(freeze: Optional\<boolean>): T 1067 1068设置当前控件和子控件是否整体离屏渲染绘制后重复绘制缓存，不再进行内部属性更新。与[freeze](#freeze12)相比，freeze参数新增了对undefined类型的支持。 1069 1070**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 1071 1072**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1073 1074**参数：** 1075 1076| 参数名 | 类型 | 必填 | 说明 | 1077| ------ | ------------------ | ---- | ------------------------------------------------------------ | 1078| freeze | Optional\<boolean> | 是 | 设置当前控件和子控件是否整体离屏渲染绘制后重复绘制缓存，不再进行内部属性更新。当前控件的不透明度不为1时绘制效果可能有差异。<br/>默认值：false<br/> true时离屏渲染绘制后重复绘制缓存，false时离屏渲染绘制后不重复绘制缓存。<br/>当freeze的值为undefined时，维持之前取值。 | 1079 1080**返回值：** 1081 1082| 类型 | 说明 | 1083| ------ | ------------------------ | 1084| T | 返回当前组件。 | 1085 1086## 示例 1087 1088### 示例1（设置图片不同属性效果） 1089设置图片的效果，包括阴影，灰度，高光，饱和度，对比度，图像反转，叠色，色相旋转等。 1090```ts 1091// xxx.ets 1092@Entry 1093@Component 1094struct ImageEffectsExample { 1095 build() { 1096 Column({ space: 5 }) { 1097 // 添加阴影效果，图片效果不变 1098 Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') 1099 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1100 Image($r('app.media.image')) 1101 .width('90%') 1102 .height(30) 1103 .shadow({ 1104 radius: 10, 1105 color: Color.Green, 1106 offsetX: 20, 1107 offsetY: 20 1108 }) 1109 1110 // 添加内部阴影效果 1111 Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') 1112 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1113 Image($r('app.media.image')) 1114 .width('90%') 1115 .height(30) 1116 .shadow({ 1117 radius: 5, 1118 color: Color.Green, 1119 offsetX: 20, 1120 offsetY: 20, 1121 fill: true 1122 }).opacity(0.5) 1123 1124 // 灰度效果0~1，越接近1，灰度越明显 1125 Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%') 1126 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1127 Image($r('app.media.image')).width('90%').height(30).grayscale(0.3) 1128 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1129 Image($r('app.media.image')).width('90%').height(30).grayscale(0.8) 1130 1131 // 高光效果，1为正常图片，<1变暗，>1亮度增大 1132 Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%') 1133 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1134 Image($r('app.media.image')).width('90%').height(30).brightness(1.2) 1135 1136 // 饱和度，原图为1 1137 Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%') 1138 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1139 Image($r('app.media.image')).width('90%').height(30).saturate(2.0) 1140 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1141 Image($r('app.media.image')).width('90%').height(30).saturate(0.7) 1142 1143 // 对比度，1为原图，>1值越大越清晰，<1值越小越模糊 1144 Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%') 1145 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1146 Image($r('app.media.image')).width('90%').height(30).contrast(2.0) 1147 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1148 Image($r('app.media.image')).width('90%').height(30).contrast(0.8) 1149 1150 // 图像反转比例 1151 Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%') 1152 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1153 Image($r('app.media.image')).width('90%').height(30).invert(0.2) 1154 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1155 Image($r('app.media.image')).width('90%').height(30).invert(0.8) 1156 1157 // 叠色添加 1158 Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%') 1159 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1160 Image($r('app.media.image')).width('90%').height(30).colorBlend(Color.Green) 1161 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1162 Image($r('app.media.image')).width('90%').height(30).colorBlend(Color.Blue) 1163 1164 // 深褐色 1165 Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%') 1166 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1167 Image($r('app.media.image')).width('90%').height(30).sepia(0.8) 1168 1169 // 色相旋转 1170 Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%') 1171 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1172 Image($r('app.media.image')).width('90%').height(30).hueRotate(90) 1173 }.width('100%').margin({ top: 5 }) 1174 } 1175} 1176``` 1177 1178 1179 1180 1181### 示例2（设置组件线性渐变模糊效果） 1182 1183该示例主要演示通过linearGradientBlur设置组件的内容线性渐变模糊效果。 1184 1185```ts 1186// xxx.ets 1187@Entry 1188@Component 1189struct ImageExample1 { 1190 private_resource1: Resource = $r('app.media.testlinearGradientBlurOrigin') 1191 @State image_src: Resource = this.private_resource1 1192 1193 build() { 1194 Column() { 1195 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { 1196 Row({ space: 5 }) { 1197 Image(this.image_src) 1198 .linearGradientBlur(60, 1199 { fractionStops: [[0, 0], [0, 0.33], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) 1200 } 1201 } 1202 } 1203 } 1204} 1205``` 1206 1207 1208 1209### 示例3（设置离屏渲染效果） 1210 1211该示例主要演示通过renderGroup来设置组件是否先整体离屏渲染绘制后，再与父控件融合绘制。 1212 1213```ts 1214// xxx.ets 1215@Component 1216struct Component1 { 1217 @Prop renderGroupValue: boolean; 1218 1219 build() { 1220 Row() { 1221 Row() { 1222 Row() 1223 .backgroundColor(Color.Black) 1224 .width(100) 1225 .height(100) 1226 .opacity(1) 1227 } 1228 .backgroundColor(Color.White) 1229 .width(150) 1230 .height(150) 1231 .justifyContent(FlexAlign.Center) 1232 .opacity(0.6) 1233 .renderGroup(this.renderGroupValue) 1234 } 1235 .backgroundColor(Color.Black) 1236 .width(200) 1237 .height(200) 1238 .justifyContent(FlexAlign.Center) 1239 .opacity(1) 1240 } 1241} 1242 1243@Entry 1244@Component 1245struct RenderGroupExample { 1246 build() { 1247 Column() { 1248 Component1({ renderGroupValue: true }) 1249 .margin(20) 1250 Component1({ renderGroupValue: false }) 1251 .margin(20) 1252 } 1253 .width("100%") 1254 .height("100%") 1255 .alignItems(HorizontalAlign.Center) 1256 } 1257} 1258``` 1259 1260 1261 1262### 示例4（当前组件内容与下方画布内容混合） 1263 1264该示例主要演示通过blendMode将当前组件内容与下方画布内容混合。 1265 1266```ts 1267// xxx.ets 1268@Entry 1269@Component 1270struct Index { 1271 build() { 1272 Column() { 1273 Text("blendMode") 1274 .fontSize(20) 1275 .fontWeight(FontWeight.Bold) 1276 .fontColor('#ffff0101') 1277 Row() { 1278 Circle() 1279 .width(200) 1280 .height(200) 1281 .fill(Color.Green) 1282 .position({ x: 50, y: 50 }) 1283 Circle() 1284 .width(200) 1285 .height(200) 1286 .fill(Color.Blue) 1287 .position({ x: 150, y: 50 }) 1288 } 1289 .blendMode(BlendMode.OVERLAY, BlendApplyType.OFFSCREEN) 1290 .alignItems(VerticalAlign.Center) 1291 .height(300) 1292 .width('100%') 1293 } 1294 .height('100%') 1295 .width('100%') 1296 // $r("app.media.image")需要替换为开发者所需的图像资源文件。 1297 .backgroundImage($r('app.media.image')) 1298 .backgroundImageSize(ImageSize.Cover) 1299 } 1300} 1301``` 1302 1303<br/>BlendMode.OVERLAY,BlendApplyType.OFFSCREEN<br/> 1304 1305<br/>不同的混合模式搭配是否需要离屏从而产生不同的效果。 1306 1307### 示例5（前景智能取反色） 1308 1309该示例主要通过InvertOptions来实现前景智能取反色。 1310 1311```ts 1312// xxx.ets 1313@Entry 1314@Component 1315struct Index { 1316 build() { 1317 Stack() { 1318 Column() 1319 Stack() { 1320 // $r("app.media.r")需要替换为开发者所需的图像资源文件。 1321 // 该示例中图片为从左到右，颜色由浅到深。 1322 Image($r('app.media.r')).width('100%') 1323 Column() { 1324 Column().width("100%").height(30).invert({ 1325 low: 0, 1326 high: 1, 1327 threshold: 0.5, 1328 thresholdRange: 0.2 1329 }) 1330 Column().width("100%").height(30).invert({ 1331 low: 0.2, 1332 high: 0.5, 1333 threshold: 0.3, 1334 thresholdRange: 0.2 1335 }) 1336 } 1337 } 1338 .width('100%') 1339 .height('100%') 1340 } 1341 } 1342} 1343``` 1344 1345 1346 1347### 示例6（设置同层阴影不重叠效果） 1348 1349该示例主要通过useShadowBatching搭配shadow实现同层阴影不重叠效果。 1350 1351```ts 1352// xxx.ets 1353@Entry 1354@Component 1355struct UseShadowBatchingExample { 1356 build() { 1357 Column() { 1358 Column({ space: 10 }) { 1359 Stack() { 1360 1361 } 1362 .width('90%') 1363 .height(50) 1364 .margin({ top: 5 }) 1365 .backgroundColor(0xFFE4C4) 1366 .shadow({ 1367 radius: 120, 1368 color: Color.Green, 1369 offsetX: 0, 1370 offsetY: 0 1371 }) 1372 .align(Alignment.TopStart) 1373 .shadow({ 1374 radius: 120, 1375 color: Color.Green, 1376 offsetX: 0, 1377 offsetY: 0 1378 }) 1379 1380 Stack() { 1381 1382 } 1383 .width('90%') 1384 .height(50) 1385 .margin({ top: 5 }) 1386 .backgroundColor(0xFFE4C4) 1387 .align(Alignment.TopStart) 1388 .shadow({ 1389 radius: 120, 1390 color: Color.Red, 1391 offsetX: 0, 1392 offsetY: 0 1393 }) 1394 .width('90%') 1395 .backgroundColor(Color.White) 1396 1397 Column() { 1398 Text() 1399 .fontWeight(FontWeight.Bold) 1400 .fontSize(20) 1401 .fontColor(Color.White) 1402 } 1403 .justifyContent(FlexAlign.Center) 1404 .width(150) 1405 .height(150) 1406 .borderRadius(10) 1407 .backgroundColor(0xf56c6c) 1408 .shadow({ 1409 radius: 300, 1410 color: Color.Yellow, 1411 offsetX: 0, 1412 offsetY: 0 1413 }) 1414 1415 Column() { 1416 Text() 1417 .fontWeight(FontWeight.Bold) 1418 .fontSize(20) 1419 .fontColor(Color.White) 1420 } 1421 .justifyContent(FlexAlign.Center) 1422 .width(150) 1423 .height(150) 1424 .backgroundColor(0x67C23A) 1425 .borderRadius(10) 1426 .translate({ y: -50 }) 1427 .shadow({ 1428 radius: 220, 1429 color: Color.Blue, 1430 offsetX: 0, 1431 offsetY: 0 1432 }) 1433 } 1434 .useShadowBatching(true) 1435 } 1436 .width('100%').margin({ top: 5 }) 1437 } 1438} 1439``` 1440 1441 1442 1443### 示例7（设置组件图像球面效果） 1444 1445该示例主要演示通过sphericalEffect设置组件的图像球面效果。 1446 1447```ts 1448// xxx.ets 1449@Entry 1450@Component 1451struct SphericalEffectExample { 1452 build() { 1453 Stack() { 1454 TextInput({ placeholder: "请输入变化范围百分比（[0%,100%]）" }) 1455 .width('50%') 1456 .height(35) 1457 .type(InputType.Number) 1458 .enterKeyType(EnterKeyType.Done) 1459 .caretColor(Color.Red) 1460 .placeholderColor(Color.Blue) 1461 .placeholderFont({ 1462 size: 20, 1463 style: FontStyle.Italic, 1464 weight: FontWeight.Bold 1465 }) 1466 .sphericalEffect(0.5) 1467 }.alignContent(Alignment.Center).width("100%").height("100%") 1468 } 1469} 1470``` 1471 1472效果图如下： 1473 1474 1475 1476去掉sphericalEffect的设置，效果如下： 1477 1478 1479 1480### 示例8（设置组件图像渐亮效果） 1481 1482该示例主要演示通过lightUpEffect设置组件的图像渐亮效果。 1483 1484```ts 1485// xxx.ets 1486@Entry 1487@Component 1488struct LightUpExample { 1489 build() { 1490 Stack() { 1491 Text('This is the text content with letterSpacing 0.') 1492 .letterSpacing(0) 1493 .fontSize(12) 1494 .border({ width: 1 }) 1495 .padding(10) 1496 .width('50%') 1497 .lightUpEffect(0.6) 1498 }.alignContent(Alignment.Center).width("100%").height("100%") 1499 } 1500} 1501 1502``` 1503 1504效果图如下： 1505 1506 1507 1508修改lightUpEffect参数值为0.2： 1509 1510 1511 1512去掉lightUpEffect的设置，效果如下： 1513 1514 1515 1516### 示例9（设置组件图像边缘像素扩展效果） 1517 1518该示例主要演示通过pixelStretchEffect设置组件的图像边缘像素扩展效果。 1519 1520```ts 1521// xxx.ets 1522@Entry 1523@Component 1524struct PixelStretchExample { 1525 build() { 1526 Stack() { 1527 Text('This is the text content with letterSpacing 0.') 1528 .letterSpacing(0) 1529 .fontSize(12) 1530 .border({ width: 1 }) 1531 .padding(10) 1532 .clip(false) 1533 .width('50%') 1534 .pixelStretchEffect({ 1535 top: 10, 1536 left: 10, 1537 right: 10, 1538 bottom: 10 1539 }) 1540 }.alignContent(Alignment.Center).width("100%").height("100%") 1541 } 1542} 1543``` 1544 1545效果图如下： 1546 1547 1548 1549去掉pixelStretchEffect的设置，原图效果如下： 1550 1551 1552 1553 1554### 示例10（系统导航条智能反色） 1555 1556该示例主要演示通过systemBarEffect来实现系统导航条智能反色。 1557 1558```ts 1559// xxx.ets 1560@Entry 1561@Component 1562struct Index { 1563 build() { 1564 Column() { 1565 Stack() { 1566 // $r("app.media.testImage")需要替换为开发者所需的图像资源文件。 1567 Image($r('app.media.testImage')).width('100%').height('100%') 1568 Column() 1569 .width(150) 1570 .height(10) 1571 .systemBarEffect() 1572 .border({ radius: 5 }) 1573 .margin({ bottom: 80 }) 1574 }.alignContent(Alignment.Center) 1575 } 1576 } 1577} 1578``` 1579 1580效果图如下： 1581 1582
