鸿蒙开发中image组件是否支持动态更换图片颜色？

Question

鸿蒙开发中image组件是否支持动态更换图片颜色？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

你可以通过设置Image组件的colorFilter值达到更改图片颜色的效果。文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
示例代码中以纯白图片为例，可以通过设置colorFilter值达到修改为#C7EDCC(199，237，204)和#FAF9DE(250，249，222)的效果。
将纯白色转换为#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

@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.white")) 
          .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%') 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。