鸿蒙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%')  }}