HarmonyOS Image\($r\('app.media.backspace'\)\)，怎么给图标着色？

Question

如题：HarmonyOS Image($r('app.media.backspace'))，怎么给图标着色？

Answer 1

可以用colorFilter来实现：

@Entry
@Component
struct Index {
  // #C7EDCC
  @State color: number[] = [0.78, 0, 0, 0, 0,
    0, 0.93, 0, 0, 0,
    0, 0, 0.80, 0, 0,
    0, 0, 0, 1, 0]
  build() {
    Row() {
      Column() {
        Image($r("app.media.backspace"))
          .width("50%")
          .colorFilter(this.color)
        Button('切换颜色').onClick(() => {
          // #FAF9DE
          this.color = [0.98, 0, 0, 0, 0,
            0, 0.976, 0, 0, 0,
            0, 0, 0.817, 0, 0,
            0, 0, 0, 1, 0]
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

将纯白色转换为\#C7EDCC颜色矩阵原理示例

设置红色通道： 我们将红色通道的值设置为 199/255 ≈ 0.78。这样，红色通道的影响将保持在 \#C7EDCC 的红色部分。

设置绿色通道： 我们将绿色通道的值设置为 237/255 ≈ 0.93。这样，绿色通道的影响将保持在 \#C7EDCC 的绿色部分。

设置蓝色通道： 我们将蓝色通道的值设置为 204/255 ≈ 0.80。这样，蓝色通道的影响将保持在 \#C7EDCC 的蓝色部分。

设置透明通道： 透明通道的值保持不变，通常为 1。

其原理为：ColorMatrixFilter（颜色矩阵滤镜） 是一种用于处理图片颜色的滤镜。它基于一个4行5列的二维矩阵，其中每一行表示红色、绿色、蓝色和透明通道的影响，而前四列与原图色值相乘，再加上第五列的偏差值，即为新的色值。

参考：

https://blog.csdn.net/wangwen\_22/article/details/109581117