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