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

?????

?

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

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

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

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

?

?

?

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

?

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

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

?

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

?原图：

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

源码：

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" xmlns:filters="org.flexunit.runner.manipulation.filters.*"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <!--[CDATA[ import mx.events.ColorPickerEvent; import spark.filters.ColorMatrixFilter; private function getMatrix(mixedColor:uint,mixedValue:Number):Array{ var r:Number = (mixedColor >> 16) & 0xFF; var g:Number = (mixedColor >> 8) & 0xFF; var b:Number = mixedColor & 0xFF; var array:Array=new Array( 1-mixedValue,r*mixedValue,1-mixedValue,g*mixedValue,b*mixedValue,1,0//透明度不变 ); return array; } protected function miexedColorPicker_changeHandler(event:ColorPickerEvent):void { refreshImageFilter(); } private function refreshImageFilter():void{ var matrix:Array=getMatrix(mixedColor.selectedColor,mixedValue.value/100); var filter:spark.filters.ColorMatrixFilter = new spark.filters.ColorMatrixFilter(matrix); var filters:Array = new Array(); filters.push(filter); starImage.filters=filters; } protected function mixedValueSlider_changeHandler(event:Event):void { refreshImageFilter(); } ]]--> </fx:Script> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <mx:Image id="starImage" x="147" y="19" width="404" height="353" source="file:/F:/图片/美景/meijing.jpg"/> <s:HSlider id="mixedValue" x="108" y="410" width="341" minimum="0" maximum="100" stepSize="1" value="0" change="mixedValueSlider_changeHandler(event)"/> <s:Label x="466" y="410" text="{mixedValue.value}%"/> <s:Label x="43" y="408" text="混合值:"/> <s:Label x="43" y="384" text="混合色:"/> <mx:ColorPicker id="mixedColor" x="108" y="380" selectedColor="0xFF0000" change="miexedColorPicker_changeHandler(event)"/> </s:Application>