HarmonyOS image组件如何设置colorFilter让图片本身从白色变为黑色?

HarmonyOS image组件如何设置colorFilter让图片本身从白色变为黑色。

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

colorFilter要求参数为矩阵。如:

.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属性,要求参数必须为矩阵,否则设置颜色无效。

如果您这边使用的图片是svg类型的话,可以使用属性fillColor将设置的填充颜色覆盖在图片上样例demo如下:​

@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)  
    }  
  }  
}

​关于颜色矩阵的详细使用可参考链接:

https://www.jianshu.com/p/d183b4edeb56

分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS image组件图片加载性能数据
97浏览 • 1回复 待解决
HarmonyOS预加载Image组件图片
271浏览 • 1回复 待解决
Image组件如何加载网络图片
2300浏览 • 1回复 待解决
Image组件如何设置默认图?
834浏览 • 1回复 待解决
使用colorFilter修改图片颜色
192浏览 • 1回复 待解决
HarmonyOS Image组件无法显示网络图片
456浏览 • 1回复 待解决
HarmonyOS Image组件网络图片不显示
149浏览 • 1回复 待解决
Image组件如何读入沙箱内的图片
2490浏览 • 1回复 待解决
Image组件如何加载沙盒内的图片
2269浏览 • 1回复 待解决
如何Image组件动态更改图片?
427浏览 • 1回复 待解决
有没有给canvas设置ColorFilter的方法?
563浏览 • 1回复 待解决