Flex图像编程技巧 3：图像滤镜

可以使用 AS3 或者是 MXML AS3 代码来交代如何使用滤镜 首先，让我们来看一下模糊滤镜。这个滤镜非常简单，首先你要决定图像在 X,Y 两个方向的模糊度，当然还有量，量属性决定了在图像进行模糊渲染的时候所要进行的迭代计算次数，因此越高的质量，迭代的次数

 

可以使用AS3或者是MXMLAS3代码来交代如何使用滤镜

首先，让我们来看一下模糊滤镜。这个滤镜非常简单，首先你要决定图像在X,Y两个方向的模糊度，当然还有量，量属性决定了在图像进行模糊渲染的时候所要进行的迭代计算次数，因此越高的质量，迭代的次数就越多，占用的CPU资源当然也就越大。当然你不需要设置所有的属性，因为这些属性都有缺省值，这里所有的例子都展示了如何设置滤镜的参数，以及对应的效果。

var filter : BlurFilter = new BlurFilter();
<br>filter.blurX = blurX.value;
<br>filter.blurY = blurY.value;
<br>filter.quality = quality.value;
<br>image.filters = [ filter ]

 

另一个简单的以及我非常喜爱的滤镜就是阴影滤镜，使用这个类你可以为任何东西添加阴影。简单易用，功能强大。

var filter : DropShadowFilter = new DropShadowFilter();
<br>filter.blurX = blurX.value;
<br>filter.blurY = blurY.value;
<br>filter.quality = quality.value;
<br>filter.alpha = _alpha.value;
<br>filter.angle = angle.value;
<br>filter.color = color.selectedColor;
<br>filter.distance = distance.value;
<br>filter.inner = inner.selected;
<br>image.filters = [ filter ];

 

这儿还有一些拉伸和发光的例子，代码和上面的基本一致，我就不贴出来了，你只需要创建一个滤镜的实例，然后将对象的滤镜数组添加相应的滤镜

>

 

使用ColorMatrixFilter，你同样也可以加强或者改变你图像的颜色（也包括其他的所有显示对象），本例中仅适用此技术来改变现实对象的像素的颜色，当然你也可以使用该技术来添加或者去除显示颜色，增加艾对比度。这是图像处理的非常强大的工具

var filter : ColorMatrixFilter = new ColorMatrixFilter();
<br>var matrix:Array = new Array();
<br>matrix = matrix.concat([r.value, 0, 0, 0, 0]); // red
<br>matrix = matrix.concat([0, g.value, 0, 0, 0]); // green
<br>matrix = matrix.concat([0, 0, b.value, 0, 0]); // blue
<br>matrix = matrix.concat([0, 0, 0, _alpha.value, 0]); // alpha
<br>filter.matrix = matrix;
<br>image.filters = [ filter ];

 

当你把这些滤镜组合起来使用的时候，你就能够体会到滤镜的强大之处了，正如上面所提到的滤镜可以作为滤镜数组参数的一部分应用到一定的对象，可以使用的滤镜的数量是没有明确的限制的，当然你要记住，你使用的滤镜越多，你耗费的CPU时间就越多，下面是如何将这些滤镜组合起来的一个例子

 

var b : BlurFilter = new BlurFilter();<br>
<br>var d : DropShadowFilter = new DropShadowFilter( 15 );<br>
<br>var g : GlowFilter = new GlowFilter( 0xFF0000, 1, 5, 5, 2, 1, true );<br>
<br>image.filters = [ b, d, g ]

 

... and here is the output:

 

你可以从下面的网址获得前面的所有教程

http://www.cynergysystems.com/blogs/blogs/andrew.trice/filters/filters.html

可以从下面的网址获得教程的所有源代码

http://www.cynergysystems.com/blogs/blogs/andrew.trice/filters/srcview/

还有这里：

http://www.cynergysystems.com/blogs/blogs/andrew.trice/filters/srcview/filters.zip

正如我前面提到的，在这篇帖子中，我并不会覆盖所有的滤镜，但是我还是给出不少的使用滤镜能够达到的效果

Bending The Rules:弯曲的窗口

使用置换滤镜的效果我们能够轻易的完成弯曲的窗口的效果

http://www.cynergysystems.com/blogs/page/andrewtrice?entry=bending_the_rules

WebCam Displacement:

详细的讲解可以从下面的连接获得

http://www.cynergysystems.com/blogs/page/andrewtrice?entry=displacementmapfilter_webcam_tons_o_fun

当然要了解滤镜的详细工作原理最好的资源永远是：Adobe Flex language reference.

WebCam Displacement: