鸿蒙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.ets
import { uiEffect } from '@kit.ArkGraphics2D';

@Entry
@Component
struct 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%')
  }
}