鸿蒙Next中image组件如何实现colorfilter效果

在鸿蒙Next中，使用image组件时如何实现colorfilter效果？目前尝试了直接设置colorfilter属性但没生效，是否需要在特定版本或配置下使用？如果有示例代码或官方文档说明，希望能分享具体实现方法。

2 回复

鸿蒙Next里给Image组件加colorFilter？简单！直接在属性里塞个colorFilter对象就行，比如{color: '#FF0000', mode: 'multiply'}，瞬间让图片红得像个害羞的番茄🍅。记得别调太狠，不然用户以为手机屏幕坏了！

更多关于鸿蒙Next中image组件如何实现colorfilter效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过Image组件的colorFilter属性实现颜色滤镜效果，支持使用ColorFilter对象或矩阵进行配置。

方法1：使用预置ColorFilter对象

import { ColorFilter } from '@kit.ArkGraphics2D';

Image($r('app.media.icon'))
  .colorFilter(
    ColorFilter.makeBlend(0xCCFF0000, BlendMode.SRC_ATOP)
  )

参数说明：

  • 0xCCFF0000：带透明度的红色
  • BlendMode：混合模式，如SRC_ATOP、MULTIPLY等

方法2：使用颜色矩阵

// 灰度滤镜矩阵
let matrix: Array<number> = [
  0.33, 0.59, 0.11, 0, 0,
  0.33, 0.59, 0.11, 0, 0,
  0.33, 0.59, 0.11, 0, 0,
  0,    0,    0,    1, 0
]

Image($r('app.media.icon'))
  .colorFilter(ColorFilter.createMatrix(matrix))

常用效果示例：

  1. 灰度效果：使用上述矩阵
  2. 颜色反转：
let invertMatrix: Array<number> = [
  -1, 0, 0, 0, 255,
  0, -1, 0, 0, 255,
  0, 0, -1, 0, 255,
  0, 0, 0, 1, 0
]
  1. 棕色复古：
let sepiaMatrix: Array<number> = [
  0.39, 0.77, 0.19, 0, 0,
  0.35, 0.69, 0.17, 0, 0,
  0.27, 0.53, 0.13, 0, 0,
  0,    0,    0,    1, 0
]

注意事项：

  • 矩阵为4x5（20个元素）的浮点数组
  • 支持动态修改实现动画效果
  • 可组合多个滤镜效果

通过调整矩阵数值或混合模式，可以实现丰富的颜色滤镜效果。

回到顶部