作者:屈剑峰 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=rs×(1-k)+rt×k 其中为原红色分量值,为混合色中的红色分量值。
同理,新颜色中绿色与蓝色分量的值分别为: g=gs×(1-k)+gt×k b=bs×(1-k)+bt×k 上述公式就是给图片着色的原理。
那么,现在为了使用ColorMatrixFilter滤镜,构造一个能到达上述公式计算效果的矩阵如下: 最后一行是alpha通道的混合设置,此处"0 0 0 1 0"表示不改变原图像的透明度。
按照此矩阵实现的着色程序效果如下: 原图:
指定混合色为FF0000,混合比例为50%后的显示效果为:
源码: flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" xmlns:filters="org.flexunit.runner.manipulation.fi lters.*"> > 16) & 0xFF; var g:Number = (mixedColor >>
& 0xFF; var b:Number = mixedColor & 0xFF; var array:Array=new Array( 1-mixedValue,0,0,0,r*mixedValue, 0,1-mixedValue,0,0,g*mixedValue, 0,0,1-mixedValue,0,b*mixedValue, 0,0,0,1,0//透明度不变 ); return array; } protected function miexedColorPicker_changeHandler(event:ColorPickerE vent):void { refreshImageFilter(); } private function refreshImageFilter():void{ var matrix:Array=getMatrix(mixedColor.selectedColor,mi xedValue.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(); } ]]--> width="404" height="353" source="file:/F:/图片/美景/meijing.jpg"/> width="341" minimum="0" maximum="100" stepSize="1" value="0" change="mixedValueSlider_changeHandler(event)"/>
分享到:
相关推荐
flex中给图片或任意组件着色的方法。希望我写的这段程序可以满足大家的项目需求。
Flex 组件Flex 组件Flex 组件Flex 组件Flex 组件
flex 组件 保存为图片flex 组件 保存为图片flex 组件 保存为图片flex 组件 保存为图片flex 组件 保存为图片flex 组件 保存为图片flex 组件 保存为图片
flex组件保存为图片,弹出保存对话框,更改保存路径,图片名。
flex 图片缩放移动组件 以封装成包 通过鼠标操作对图片进行放大、缩小、移动位置等
Flex中获取组件快照的ByteArray,然后调用JavaServlet将ByteArray导出成图片。
这个在使用的时候可以自己加,另外一个问题就是由于这个库是FLEX3的,所以在FLEX4.0或以上的版本(使用的spark主题)的时候,需要修改类里面的Canvas为Group或者其他的显示容器,如果有什么问题可以发邮件给我。...
很通用的Flex 分页组件,经过本人测试,可以应用到项目中,很方便
Flex相册 Flex图片
在Flex中如何使用按钮Button组件进行开发
flex做拓扑图的组件flex做拓扑图的组件flex做拓扑图的组件
Flex3组件拖放教程,该组件是flex组件中最有特色的
Flex3组件介绍,包含flex3的所有组件介绍并有例子
flex 重写组件
研究Flex 组件声明周期,了解组件的生成步骤
flex组件的所有源文件 flex组件的所有源文件 flex组件的所有源文件 flex组件的所有源文件
flex组件之数据可视化组件实例源码 包括多种chart,共27个实例
flex 背景图片重复的组件库 类似HTML的CSS样式表中的背景重复
flex 高级自定义组件 需要重写的方法,以及为什么要重写,何时调用等。
详解Flex4的系统组件与基本组件。让你在应用的时候知道用什么.