Flex中的图像滤镜

Andrew Trice

这是 Andrew 图像编程系列的第三篇，当然这些技巧不仅适用于 FLEX ，他们同样也适用于 FLASH ，本篇主要关注的是如何在图像处理的过程中恰当的运用滤镜

图像滤镜使得编程人员能够对任意的显示对象进行像素级别的操作及变换，因此任何能够在 FLEX 中显示的对象都可以运用滤镜来进行诸如：模糊，发光，阴影甚至是颜色处理，锐化，边界检测。听起来似乎很玄，但是其实上手十分容易，在这篇帖子中我将从 FLEX 的几个简单的特性入手，如：模糊，阴影，发光以及颜色变换等等。也许在后续的一些贴子中我会展示一些更加高深的技术如：置换滤镜，羽化等等

All of these examples begin with the same gear image that we've used in the previous two examples: 这里用到的例子还是我们在前面的例子中使用的齿轮

 

可以使用 AS3 或者是 MXML 标签来应用滤镜，这里的例子主要是透过 AS3 代码来交代如何使用滤镜

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

var filter : BlurFilter = new BlurFilter();



filter.blurX = blurX.value;



filter.blurY = blurY.value;



filter.quality = quality.value;



image.filters = [ filter ]

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

var filter : DropShadowFilter = new DropShadowFilter();



filter.blurX = blurX.value;



filter.blurY = blurY.value;



filter.quality = quality.value;



filter.alpha = _alpha.value;



filter.angle = angle.value;



filter.color = color.selectedColor;



filter.distance = distance.value;



filter.inner = inner.selected;



image.filters = [ filter ];

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

>

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

var filter : ColorMatrixFilter = new ColorMatrixFilter();



var matrix:Array = new Array();



matrix = matrix.concat([r.value, 0, 0, 0, 0]); // red



matrix = matrix.concat([0, g.value, 0, 0, 0]); // green



matrix = matrix.concat([0, 0, b.value, 0, 0]); // blue



matrix = matrix.concat([0, 0, 0, _alpha.value, 0]); // alpha



filter.matrix = matrix;



image.filters = [ filter ];

 

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

 

var b : BlurFilter = new BlurFilter();





var d : DropShadowFilter = new DropShadowFilter( 15 );





var g : GlowFilter = new GlowFilter( 0xFF0000, 1, 5, 5, 2, 1, true );





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: