1# 图像效果 2 3设置组件的模糊，阴影效果以及设置图片的图像效果。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12 13| 名称 | 参数类型 | 默认值 | 描述 | 14| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | 15| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>取值范围：[0, +∞)<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 16| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>取值范围：[0, +∞)<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 17| shadow | {<br/>radius: number \| [Resource](ts-types.md#resource),<br/>color?: [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),<br/>offsetX?: number \| [Resource](ts-types.md#resource),<br/>offsetY?: number \| [Resource](ts-types.md#resource)<br/>} | - | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/> | 18| 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卡片中使用。 | 19| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大。<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 20| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 21| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 22| invert | number | 0 | 反转输入的图像。入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 23| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。 （百分比）<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 24| hueRotate | number \| string | '0deg' | 色相旋转效果，输入参数为旋转角度。<br/>取值范围：(-∞, +∞)<br/>**说明：** <br/>色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 25| colorBlend <sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 26 27## ShadowOptions对象说明 28 29阴影属性集合，用于设置阴影的模糊半径、阴影的颜色、X轴和Y轴的偏移量。 30 31从API version 9开始，该接口支持在ArkTS卡片中使用。 32 33| 名称 | 类型 | 必填 | 说明 | 34| ------- | ---------------------------------------- | ---- | ---------------------------------------- | 35| radius | number \| [Resource](ts-types.md#resource) | 是 | 阴影模糊半径。<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。 | 36| color | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | 否 | 阴影的颜色。<br/>默认为黑色。 | 37| offsetX | number \| [Resource](ts-types.md#resource) | 否 | 阴影的X轴偏移量。<br/>默认为0。 | 38| offsetY | number \| [Resource](ts-types.md#resource) | 否 | 阴影的Y轴偏移量。<br/>默认为0。 | 39 40## 示例 41 42### 示例1 43模糊属性的用法，blur内容模糊，backdropBlur背景模糊。 44```ts 45// xxx.ets 46@Entry 47@Component 48struct BlurEffectsExample { 49 build() { 50 Column({ space: 10 }) { 51 // 对字体进行模糊 52 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') 53 Flex({ alignItems: ItemAlign.Center }) { 54 Text('original text').margin(10) 55 Text('blur text') 56 .blur(1).margin(10) 57 Text('blur text') 58 .blur(2).margin(10) 59 Text('blur text') 60 .blur(3).margin(10) 61 }.width('90%').height(40) 62 .backgroundColor(0xF9CF93) 63 64 65 // 对背景进行模糊 66 Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') 67 Text() 68 .width('90%') 69 .height(40) 70 .fontSize(16) 71 .backdropBlur(3) 72 .backgroundImage('/pages/attrs/image/image.jpg') 73 .backgroundImageSize({ width: 1200, height: 160 }) 74 }.width('100%').margin({ top: 5 }) 75 } 76} 77``` 78 79 80 81### 示例2 82设置图片的效果，包括阴影，灰度，高光，饱和度，对比度，图像反转，叠色，色相旋转等。 83```ts 84// xxx.ets 85@Entry 86@Component 87struct ImageEffectsExample { 88 build() { 89 Column({ space: 10 }) { 90 // 添加阴影效果，图片效果不变 91 Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') 92 Image($r('app.media.image')) 93 .width('90%') 94 .height(40) 95 .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 30 }) 96 97 // 灰度效果0~1，越接近1，灰度越明显 98 Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%') 99 Image($r('app.media.image')).width('90%').height(40).grayscale(0.3) 100 Image($r('app.media.image')).width('90%').height(40).grayscale(0.8) 101 102 // 高光效果，1为正常图片，<1变暗，>1亮度增大 103 Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%') 104 Image($r('app.media.image')).width('90%').height(40).brightness(1.2) 105 106 // 饱和度，原图为1 107 Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%') 108 Image($r('app.media.image')).width('90%').height(40).saturate(2.0) 109 Image($r('app.media.image')).width('90%').height(40).saturate(0.7) 110 111 // 对比度，1为原图，>1值越大越清晰，<1值越小越模糊 112 Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%') 113 Image($r('app.media.image')).width('90%').height(40).contrast(2.0) 114 Image($r('app.media.image')).width('90%').height(40).contrast(0.8) 115 116 // 图像反转比例 117 Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%') 118 Image($r('app.media.image')).width('90%').height(40).invert(0.2) 119 Image($r('app.media.image')).width('90%').height(40).invert(0.8) 120 121 // 叠色添加 122 Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%') 123 Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Green) 124 Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Blue) 125 126 // 深褐色 127 Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%') 128 Image($r('app.media.image')).width('90%').height(40).sepia(0.8) 129 130 // 色相旋转 131 Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%') 132 Image($r('app.media.image')).width('90%').height(40).hueRotate(90) 133 }.width('100%').margin({ top: 5 }) 134 } 135} 136``` 137 138 139 140
