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 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## foregroundBlurStyle 16 17foregroundBlurStyle(value: BlurStyle, options?: ForegroundBlurStyleOptions): T 18 19为当前组件提供内容模糊能力。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------- | ------------------------------------------------------------ | ---- | ------------------------ | 29| value | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 是 | 内容模糊样式。 | 30| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions对象说明) | 否 | 可选参数，内容模糊选项。 | 31 32**返回值：** 33 34| 类型 | 说明 | 35| ------ | ------------------------ | 36| T | 返回当前组件。 | 37 38## foregroundBlurStyle<sup>18+</sup> 39 40foregroundBlurStyle(style: Optional\<BlurStyle>, options?: ForegroundBlurStyleOptions): T 41 42为当前组件提供内容模糊能力。与[foregroundBlurStyle](#foregroundblurstyle)相比，style参数新增了对undefined类型的支持。 43 44**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 45 46**系统能力：** SystemCapability.ArkUI.ArkUI.Full 47 48**参数：** 49 50| 参数名 | 类型 | 必填 | 说明 | 51| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 52| style | Optional\<[BlurStyle](ts-universal-attributes-background.md#blurstyle9)> | 是 | 内容模糊样式。<br/>当style的值为undefined时，恢复为无模糊的内容。 | 53| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions对象说明) | 否 | 可选参数，内容模糊选项。 | 54 55**返回值：** 56 57| 类型 | 说明 | 58| ------ | ------------------------ | 59| T | 返回当前组件。 | 60 61## foregroundBlurStyle<sup>19+</sup> 62 63foregroundBlurStyle(style: Optional\<BlurStyle>, options?: ForegroundBlurStyleOptions, sysOptions?: SystemAdaptiveOptions): T 64 65为当前组件提供内容模糊能力。与[foregroundBlurStyle<sup>18+</sup>](#foregroundblurstyle18)相比，新增了sysOptions参数，即支持系统自适应调节参数。 66 67**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71**参数：** 72 73| 参数名 | 类型 | 必填 | 说明 | 74| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 75| style | Optional\<[BlurStyle](ts-universal-attributes-background.md#blurstyle9)> | 是 | 内容模糊样式。<br/>当style的值为undefined时，恢复为无模糊的内容。 | 76| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions对象说明) | 否 | 可选参数，内容模糊选项。 | 77| sysOptions | [SystemAdaptiveOptions](ts-universal-attributes-background.md#systemadaptiveoptions19) | 否 | 系统自适应调节参数。<br/>默认值：{ disableSystemAdaptation: false } | 78 79**返回值：** 80 81| 类型 | 说明 | 82| ------ | ------------------------ | 83| T | 返回当前组件。 | 84 85> **说明：** 86> 87> foregroundBlurStyle接口为实时模糊接口，每帧执行实时渲染，性能负载较大。当模糊内容与模糊半径均无需变动时，推荐采用静态模糊接口[blur](../../apis-arkgraphics2d/js-apis-effectKit.md#blur)。最佳实践请参考：[图像模糊动效优化-使用场景](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-fuzzy-scene-performance-optimization#section4945532519)。 88 89## ForegroundBlurStyleOptions对象说明 90继承自[BlurStyleOptions](#blurstyleoptions) 91 92设置内容模糊选项。 93 94**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 95 96**系统能力：** SystemCapability.ArkUI.ArkUI.Full 97 98## BlurStyleOptions 99 100内容模糊选项。 101 102**系统能力：** SystemCapability.ArkUI.ArkUI.Full 103 104| 名称 | 类型 | 只读 | 可选 | 说明 | 105| --------------------------- | ------------------------------------------------------- | ---- | ---- |------------------------------------------------------------ | 106| colorMode | [ThemeColorMode](#themecolormode枚举说明) | 否 | 是 | 内容模糊效果使用的深浅色模式。<br/>默认值：ThemeColorMode.SYSTEM<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 107| adaptiveColor | [AdaptiveColor](#adaptivecolor10枚举说明) | 否 | 是 | 内容模糊效果使用的取色模式。<br/>默认值：AdaptiveColor.DEFAULT<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 108| blurOptions<sup>11+</sup> | [BlurOptions](#bluroptions11) | 否 | 是 | 灰阶模糊参数。<br/>默认值：grayscale: [0,0] <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 109| scale<sup>12+</sup> | number | 否 | 是 | 内容模糊效果程度。<br/>默认值：1.0 <br/>取值范围：[0.0, 1.0] <br/>1.0表示模糊程度最高。 <br/>0.0表示模糊程度最低。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 110 111## ThemeColorMode枚举说明 112 113设置颜色模式。 114 115**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 116 117**系统能力：** SystemCapability.ArkUI.ArkUI.Full 118 119| 名称 | 值 | 说明 | 120| ------ | --- | ------- | 121| SYSTEM | - | 跟随系统深浅色模式。 | 122| LIGHT | - | 固定使用浅色模式。 | 123| DARK | - | 固定使用深色模式。 | 124 125## AdaptiveColor<sup>10+</sup>枚举说明 126 127取色模式。 128 129**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133| 名称 | 说明 | 134| ------- | ------------------------- | 135| DEFAULT | 不使用取色模糊。使用默认的颜色作为蒙版颜色。采用非DEFAULT方式较耗时。 | 136| AVERAGE | 使用取色模糊。将取色区域的颜色平均值作为蒙版颜色。 | 137 138## BlurOptions<sup>11+</sup> 139灰阶模糊参数。 140 141**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 142 143**系统能力：** SystemCapability.ArkUI.ArkUI.Full 144 145| 名称 | 类型 | 必填 | 说明 | 146| ---- | ---- | ---- | -------------------------- | 147| grayscale | [number, number] | 是 | 灰阶模糊参数，两参数取值范围均为[0,127] 。对图像中的黑白色进行色阶调整，使其趋于灰色更为柔和美观，对图像中的彩色调整没有效果。参数一表示对黑色的提亮程度，参数二表示对白色的压暗程度，参数值越大调整效果越明显（黑白色变得越灰），有效值范围0-127。例如：设置参数为（20,20），图片中的黑色像素RGB:[0, 0, 0]会调整为[20,20,20]，白色像素RGB:[255,255,255]会调整为[235,235,235]（255-20），图像中的彩色像素维持不变。 | 148 149 150## 示例 151 152该示例主要演示通过foregroundBlurStyle为图片设置内容模糊效果。 153 154```ts 155// xxx.ets 156@Entry 157@Component 158struct ForegroundBlurStyleDemo { 159 build() { 160 Column() { 161 Text('Thin Material').fontSize(30).fontColor(0xCCCCCC) 162 // $r("app.media.bg")需要替换为开发者所需的图像资源文件。 163 Image($r('app.media.bg')) 164 .width(300) 165 .height(350) 166 .foregroundBlurStyle(BlurStyle.Thin, 167 { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) 168 } 169 .height('100%') 170 .width('100%') 171 } 172} 173``` 174 175
