HarmonyOS Image组件如何设置填充颜色

可以使用colorfilter：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#colorfilter9

colorFilter要求参数为矩阵。于矩阵的变换请参考以下文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-matrix4-V5

如：

.colorFilter([0,0,0,0,0,
  0,0,0,0,0,
  0,0,0,0,0,
  0.2,0.2,0.2,0.2,0.2,])
1.
2.
3.
4.

如果输入的滤镜矩阵为：

[ r_1,r_2,r_3,r_4,r_5,
  g_1，g_2，g_3，g_4，g_5,
b_1,b_2,b_3,b_4,b_5,
a_1,a_2,a_3,a_4,a_5]
1.
2.
3.
4.

像素点为：

[R, G, B, A]
1.

则过滤后的颜色为：

[R’, G’, B’, A’]：
R’= r_1R+ r_2G+ r_3B+ r_4A+ r_5
G’ = g_1R + g_2G + g_3B+g_4A+g_5
B’= b_1R + b_2G + b_3B +b_4A + b_5
A’ = a_1R + a_2G+ a_3B +a_4A+a_5
1.
2.
3.
4.
5.

目前如果使用colorfilter属性，要求参数必须为矩阵，否则设置颜色无效。

参考示例：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Image($r('app.media.example'))
          .width('40%')
          .margin(10)
        Image($r('app.media.example'))
          .width('40%')
          .colorFilter(
            [1, 1, 0, 0, 0,
              0, 1, 0, 0, 0,
              0, 0, 1, 0, 0,
              0, 0, 0, 1, 0])
          .margin(10)
      }.width('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.