一开始觉得AS3的滤镜很难使用，尤其是那些矩阵，让人望而生畏。最近写一个聊天模块，要用到离线状态下的灰色头像，于是认真研究了ColorMatrixFilter，发现其实也没有那么难。所谓的矩阵其实就是一个再普通不过的Array，只要弄懂这个Array各个元素的关系就很容易使用滤镜。
先发代码，下面再详细介绍。这个程序实现加载一张彩色图像，通过滤镜变成黑白图像之后输出。
package {
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.ColorMatrixFilter;
import flash.net.URLRequest;
public class ColorFilterSample extends Sprite
{
private var loader:Loader;
public function ColorFilterSample()
{
loader=new Loader();
loader.contentLoaderInfo.addEventListener
(Event.COMPLETE, onComplete);
loader.load(new URLRequest("hehua.jpg"));
}
private function onComplete(e:Event):void{
//加载一张彩色图片
var image:Bitmap=new Bitmap();
image=Bitmap(loader.content);
//定义滤镜matrix，一个包含20个项的数组
var matrix:Array=[0.3086, 0.6094, 0.0820, 0, 0,
0.3086, 0.6094, 0.0820, 0, 0,
0.3086, 0.6094, 0.0820, 0, 0,
0, 0, 0, 1, 0];
//初始化一个ColorMatrixFilter对象(matrix作为参数)
var myfilter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
//将滤镜应用于图片
image.filters=[myfilter];
addChild(image);
}
}
}
首先定义一个matrix数组：一个包含20个浮点数的数组。AS3.0帮助文档中的计算公式是这样的：
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]
上面的公式看起来有点复杂，没关系，再看下面的图示就清晰多了：
srcR srcG srcB srcA offset
redResult a[0] a[1] a[2] a[3] a[4]
greenResult a[5] a[6] a[7] a[8] a[9]
blueResult a[10] a[11] a[12] a[13] a[14]
alphaResult a[15] a[16] a[17] a[18] a[19]
srcR,srcG,srcB,srcA表示原始图像每个像素的RGBA值（关于像素颜色的RGBA值请查阅手册，这里不再展开），redResult,greenResutl,blueResult,alphaResult表示目标图像的RGBA值。上面公式的意思是说：redResult的值是a[0]、a[1]、a[2]、a[3]分别与 srcR,srcG,srcB,srcA相乘，再加上a[4]的总和（a[4]是偏移量）。greenResutl,blueResult,alphaResult以此类推。这样说应该很容易理解了吧？
好吧，这个公式无非就是说原始图像的像素值，通过和这个数组交叉相乘，得到目标图像的像素值。
很明显，我们给这个数组定义不同的值，则会得到不同的结果，目标图像的效果也不一样。这里要得到灰度图像应该使用这个数组：
[0.3086, 0.6094, 0.0820, 0, 0,
0.3086, 0.6094, 0.0820, 0, 0,
0.3086, 0.6094, 0.0820, 0, 0,
0, 0, 0, 1, 0];
这个数组凭什么得来的呢？应该是某些大师实验得到的吧，百度可以搜索到这方面的专业论述，我这里就说一下大概意思。话说取得原始图像的RGB值，计算得到它们的平均值之后再赋给新的RGB值，这样对每个像素处理之后就得到黑白图像了，或者可以理解成RGB值按照0.33 : 0.33 : 0.33的权值重新分配；后来有些大师研究得到结论：如果RGB值按照0.3086 : 0.6094 : 0.0820的比例分配，得到的灰度图像看起来最顺眼，于是就有了上面的数组！顺便再提一下，这里的alpha值没有改变（那个数字1，你懂的），还有偏移量都为0。