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

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

HarmonyOS
2024-10-28 09:30:06
浏览
收藏 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,])
  • 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]

则过滤后的颜色为:​

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

如果您这边使用的图片是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)  
    }  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

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

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

分享
微博
QQ
微信
回复
2024-10-28 16:43:35
相关问题
HarmonyOS 如何设置图片colorfilter
1010浏览 • 1回复 待解决
使用colorFilter修改图片颜色
1196浏览 • 1回复 待解决
HarmonyOS Image UI 如何设置图片透明度
719浏览 • 1回复 待解决
HarmonyOS Image组件如何设置填充颜色
943浏览 • 1回复 待解决
HarmonyOS Image组件加载图片报错
887浏览 • 1回复 待解决
Image组件如何设置默认图?
1791浏览 • 1回复 待解决
有没有给canvas设置ColorFilter的方法?
1242浏览 • 1回复 待解决
Image组件如何加载网络图片
3675浏览 • 1回复 待解决