1、概 述
ArkUI为组件提供了滤镜效果设置，背景滤镜、前景滤镜、合成滤镜。我们可以通过以下方式为组件设置对应的滤镜效果。
Text('前景滤镜')// ..其他属性.foregroundFilter(filterTest1) // 通过 foregroundFilter 设置模糊效果Text('背景滤镜')// ...其他属性.backgroundFilter(filterTest2) // 通过 backgroundFilter 设置模糊效果Text('合成滤镜')// ...其他属性.compositingFilter(filterTest3) // 通过 compositingFilter 设置模糊效果
具体用法，下面展开介绍。
2、设置滤镜效果
foregroundFilter、backgroundFilter、compositingFilter三个属性的入参是Filter对象。Filter对象的创建方式如下：
import { uiEffect } from "@kit.ArkGraphics2D";// ....let filter : uiEffect.Filter = uiEffect.createFilter()
目前Filter对象暂时只能设置一种效果，blur模糊效果，接口如下：
blur(blurRadius: number): Filter
我们创建好的Filter则可以传入到组件对应的属性中。
一个案例如下（有一个文本组件，有一张背景图片，分别设置三种滤镜效果）：
-
-
前景滤镜将文字进行模糊处理；
-
背景对背景图片进行了处理；
-
合成滤镜是对两者同时进行处理；
-
【注意：目前版本的IDE预览器中是看不到效果的，需要在真机或者模拟器中运行】
代码如下：
// xxx.etsimport { uiEffect } from '@kit.ArkGraphics2D';@Entry@Componentstruct FilterEffectExample { @State filterTest1: uiEffect.Filter = uiEffect.createFilter().blur(10) @State filterTest2: uiEffect.Filter = uiEffect.createFilter().blur(10) @State filterTest3: uiEffect.Filter = uiEffect.createFilter().blur(10) build() { Column({ space: 15 }) { Text('originalImage').fontSize(20).width('75%').fontColor('#DCDCDC') Text('没有滤镜') .width(100) .height(100) .backgroundColor('#ADD8E6') .backgroundImage($r("app.media.test")) .backgroundImageSize({ width: 100, height: 100 }) Text('foregroundFilter').fontSize(20).width('75%').fontColor('#DCDCDC') Text('前景滤镜') .width(100) .height(100) .backgroundColor('#ADD8E6') .backgroundImage($r("app.media.test")) .backgroundImageSize({ width: 100, height: 100 }) .foregroundFilter(this.filterTest1) // 通过 foregroundFilter 设置模糊效果 Text('backgroundFilter').fontSize(20).width('75%').fontColor('#DCDCDC') Text('背景滤镜') .width(100) .height(100) .backgroundColor('#ADD8E6') .backgroundImage($r("app.media.test")) .backgroundImageSize({ width: 100, height: 100 }) .backgroundFilter(this.filterTest2) // 通过 backgroundFilter 设置模糊效果 Text('compositingFilter').fontSize(20).width('75%').fontColor('#DCDCDC') Text('合成滤镜') .width(100) .height(100) .backgroundColor('#ADD8E6') .backgroundImage($r("app.media.test")) .backgroundImageSize({ width: 100, height: 100 }) .compositingFilter(this.filterTest3) // 通过 compositingFilter 设置模糊效果 } .height('100%') .width('100%') }}