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

Image的fillColor()仅对矢量图生效吗,普通位图如何设置填充颜色。APP中有大量图片分为亮色和暗色,希望通过代码设置避免冗余的资源节省包大小,应该如何实现?

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

可以使用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,])

如果输入的滤镜矩阵为:

[ 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]

像素点为:

[R, G, B, A]

则过滤后的颜色为:

[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

目前如果使用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)
    }
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
XComponent组件如何设置背景颜色
2174浏览 • 1回复 待解决
HarmonyOS image 替换颜色
433浏览 • 1回复 待解决
Image组件如何设置默认图?
1071浏览 • 1回复 待解决
HarmonyOS 背景图片如何填充组件
510浏览 • 1回复 待解决
Image组件无法设置长按事件
1955浏览 • 1回复 待解决
HarmonyOS 如何image设置遮罩 ?
345浏览 • 1回复 待解决
HarmonyOS bindPopup如何设置箭头颜色
292浏览 • 1回复 待解决
HarmonyOS 怎么实现Image动态修改颜色
28浏览 • 1回复 待解决
HarmonyOS image图标怎么变成其他的颜色
1174浏览 • 1回复 待解决