- 浏览: 12135 次
最新评论
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=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(); } ]]--> height="353" source="file:/F:/图片/美景/meijing.jpg"/>
发表评论
-
Java For Android - 操纵字符串中的字符
2012-07-06 09:52 756声明:本文翻译自h ... -
正则基础之
2012-07-06 09:45 639捕获组捕获到的内容,不仅可以在正则表达式外部通过程序进行引 ... -
如何在Sql Server 中使用正则表达式
2012-07-06 09:37 738如果能在Sql Server中 ... -
完整升级XBMC记录
2012-07-06 09:30 985一、下载11.29版本 ... -
js动态控制表单的tr,td的显示和隐藏
2012-07-05 20:45 961无论是事先写好的,还是动态生成的,要找到指定的tr或td都 ... -
Ext JS 4的Grid组件
2012-07-03 13:43 669我们正在不懈地努 ... -
Flex4与java通信(二、与servlet通信)
2012-07-02 12:24 677说明:这里介绍使用URLRequest+URLLoader ... -
Flex权威指南3学习笔记之一------界面知识(二)
2012-07-02 12:24 583使用基于条件的约束的布局 1.在viewCart按钮和ch ... -
Flex 屏幕截图并导出图片
2012-07-02 12:23 566在flex中也经常会用 ... -
完美解决Panel设置了borderSkin后内容体与标题栏重叠的问题
2012-07-01 09:58 568如果您做过Flex皮肤 ... -
Web前端开发之“常见模块你真的很了解吗?”
2012-07-01 09:58 768标题和内容模 ... -
Flex3 给VBox/HBox等加背景图片的简易方法
2012-07-01 09:58 908例如有 要给它加个背景图片: 步骤一、 ... -
Flex中要想使图表的横坐标轴标签成45度显示(2)
2012-07-01 09:58 646从外部引入样式 1.在外部src/assets目录文 ... -
实现flex中实现图片平铺
2012-07-01 09:58 660在网页中实现一个图片平铺功能比较简单,只需要设置css样式 ... -
原创-Flex游戏篇--游戏开发概述_6050
2012-06-30 16:23 631原创-Flex游戏篇--游戏开 ... -
Flex优势
2012-06-30 16:23 335Flex优势 2011年07月13日 ... -
flexkf.com flex开发网站简介
2012-06-30 16:23 472flexkf.com flex开发网站简介 2010年06月 ...
相关推荐
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的系统组件与基本组件。让你在应用的时候知道用什么.