鸿蒙UI开发——组件滤镜效果
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%')}}