flex中给图片（或任意组件）着色的方法

作者：屈剑峰   2011年4月3日

 

在flex中可使用ColorMatrixFilter滤镜给组件着色，该滤镜属性matrix是一个4*5的矩阵，Flex在显示组件时各像素新的颜色计算公式如下：

redResult=(a[0]*srcR) + (a[1]*srcG) + (a[2]  * srcB) + (a[3] *srcA) + a[4]

greenResult=(a[5]*srcR) + (a[6]*srcG) + (a[7]*srcB) + (a[8] *srcA) + a[9]

blueResult = (a[10]*srcR) + (a[11]*srcG) + (a[12]*srcB) + (a[13] *srcA) + a[14]

alphaResult = (a[15]*srcR) + (a[16]*srcG) + (a[17]*srcB) + (a[18]*srcA) + a[19]

现在，我的需求是给图片着色，参数为：

1、混合颜色；

2、混合比例

我们称原图片中某像素的颜色值为源source,称混合色为目标target，设混合比例为k。那么处理得到的新颜色中红色分量的值为：

r=r_s×(1-k)+r_t×k

     

 

其中r_s为原红色分量值，r_t为混合色中的红色分量值。

同理，新颜色中绿色与蓝色分量的值分别为：

g=g_s×(1-k)+g_t×k

b=b_s×(1-k)+b_t×k

 

 

上述公式就是给图片着色的原理。

 

那么，现在为了使用ColorMatrixFilter滤镜，构造一个能到达上述公式计算效果的矩阵如下：

1-k	0	0	0	rt×k
0	1-k	0	0	gt×k
0	0	1-k	0	bt×k
0	0	0	1	0

 最后一行是alpha通道的混合设置，此处“0  0  0  1  0”表示不改变原图像的透明度。

 

按照此矩阵实现的着色程序效果如下：

 

 原图：

 指定混合色为FF0000，混合比例为50%后的显示效果为：

 

点击下载源码。