flex 图片滤镜效果实例

先附上几个别人例子，引自：http://www.cnblogs.com/xxcainiao/archive/2008/11/08/1329664.html

1:聚光灯效果：

实例：http://www.rphelan.com/flex/SpotlightDemo/SpotlightDemo.html

源文件：http://www.rphelan.com/flex/SpotlightDemo/srcview/index.html

2:放大镜效果：

实例：http://www.rphelan.com/flex/MagnifyDemo/MagnifyDemo.html

源文件：http://www.rphelan.com/flex/MagnifyDemo/srcview/index.html

3：缩放模糊效果：

实例：http://www.rphelan.com/flex/ZoomBlurDemo/ZoomBlurDemo.html

源文件：http://www.rphelan.com/flex/ZoomBlurDemo/srcview/index.html

4：浮雕效果：

实例：http://www.rphelan.com/flex/SharpenDemo/SharpenDemo.html

源文件：http://www.rphelan.com/flex/SharpenDemo/srcview/index.html

5：水波效果：

实例：http://www.rphelan.com/flex/WaveReflectionDemo/WaveReflectionDemo.html

源文件：http://www.rphelan.com/flex/WaveReflectionDemo/srcview/index.html

都是使用了flashplayer10的ShaderFilter。

然后是一些理论性的知识。看了很多网页，不一一列举，不过http://dev.yesky.com/SoftChannel/72342371928637440/20050105/1896848.shtml给予的信息比较多。

人的眼睛对于图像的观察，人的眼睛对于灰度/亮度的敏感要远远大于对色彩的敏感，而人的眼睛对于暖色调和冷色调的敏感有要远大于对一般色彩的敏感度。经过大量的测试，人们得到了一个经验公式，来说明人的眼睛是如何识别亮度的：
Gray = Red * 0.3 + Green * 0.6 + Blue * 0.1
而右因为人的眼睛对于绿色的敏感度最大，就有了一个更加近似的公式：
Gray = Green

于是想到图片的灰度效果，可以通过将图片的各个像素中的Red和Blue值去掉来实现：

var bitmap:BitmapData = new BitmapData();
…
for (var i:uint = 0; i < bitmap.width; i++) {
for (var j:uint = 0; j < bitmap.height; j++) {
var color:uint = bitmap.getPixel(i, j);
color = color<<16>>>24;
color = color << 16 | color << 8 | color;
bitmap.setPixel(i, j, color);
}
}

然后想一想木雕效果，木雕是看上去是只有两个颜色的。于是可以在做灰度处理时，给一个分解值，当大于这个值时，全黑显示，不然全白。于是可以修改代码：

var bitmap:BitmapData = new BitmapData();
…
for (var i:uint = 0; i < bitmap.width; i++) {
for (var j:uint = 0; j < bitmap.height; j++) {
var color:uint = bitmap.getPixel(i, j);
color = color<<16>>>24;
color = color << 16 | color << 8 | color;
if (color > 128) color = 0xff;
else color = 0;
bitmap.setPixel(i, j, color);
}
}

再看看锐化效果。锐化就是比较相邻的几个像素，把当前像素加上和周围的像素的差就可以了。你可以将该差值乘以一个数值，比如0.3——这个数值就是锐化系数了。

图片柔化，原理和锐化一样，只不过它不是要体现差值，而是要缩小差值；它是将当前点用周围几个点的平均值来代替。

再就是扩散了，也就是水彩效果。一种简单的处理方法就是用当前点周围的随机点代替。于是想到做出具有某种风格的水彩效果——那就需要很复杂的处理方法了。

var bitmap:BitmapData = new BitmapData();
…
var rate:Number = 0.2;//扩散系数
for (var i:uint = 1; i < bitmap.width – 1; i++) {
for (var j:uint = 1; j < bitmap.height – 1; j++) {
if (Math.random() > rate) continue;
var ii:uint = i + (Math.random() > 0.5 ? 1 : -1);
var jj:uint = j + (Math.random() > 0.5 ? 1 : -1);
bitmap.setPixel(i, j, bitmap.getPixel(ii, jj));
}
}

对于我而言，最难理解的是浮雕效果的原理：将相邻的两个像素相减，得到的差加上127作为新的值。唉这是基于什么理论呢？

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/yuanpan/archive/2009/10/14/4668853.aspx