簡單談ColorMatrixFilter以及Bitmapdata.threshold()

Flash 8以後出現的一些點陣圖變化的功能非常有趣。前陣子執行一個案子，想讓使用者上傳一張圖片，然後將圖片輪廓轉成白色-透明的圖形。查了一些資料後，只要用ColorMatrixFilter以及Bitmapdata.threshold()這兩個東西就可以完成。

首先，我們先取得上傳圖片的Bitmapdata，然後用ColorMatrixFilter將它轉為灰階。轉成灰階的filter參數可以參考這篇。大概的程式碼是這樣：

//myPic為上傳的圖片
_bitmapDataSource = new BitmapData(myPic.width, myPic.height, true, 0xFFFFFFFF);
//取得圖片的Bitmapdata
_bitmapDataSource.draw(myPic);
//轉成灰階的Matrix設定
var matrix:Array = [0.5, 0.5, 0.5, 0, 0,
                    0.5, 0.5, 0.5, 0, 0,
                    0.5, 0.5, 0.5, 0, 0,
                    0, 0, 0, 1, 0];
var colorMatrixFilter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
//套上轉灰階的ColorMatrixFilter
_bitmapDataSource.applyFilter(_bitmapDataSource, new Rectangle(0, 0, myPic.width, myPic.height), new Point(0, 0), colorMatrixFilter);

轉成灰階的目的，是想讓三個Channel的資訊平均，這樣只要用其中一個Channel來決定過濾的圖形。

接著我們寫一個function，當調整圖形臨界值的時候就呼叫，使用Bitmapdata.threshold()將圖片轉為白色-透明的圖形。可以先參考一下Bitmapdata.threshold()的說明。原理是：我們讓user決定一個圖形臨界值0~255，再用Bitmapdata.threshold()方法來比較B(藍色) channel的值，當小於等於臨界值，就用白色取代，否則就維持透明色。程式碼如下：

//指定範圍與起始點，給threshold用的
var rect:Rectangle = new Rectangle(0, 0, _bitmapDataSource.width, _bitmapDataSource.height);
var pt:Point = new Point(0, 0);
//臨界值，num是user調整出來，0~1的值。
var threshold:uint = uint(255 * num);
//開一個新的Bitmapdata，先填滿透明色
_bitmapDataNew = new BitmapData(_bitmapDataSource.width, _bitmapDataSource.height, true, 0x00000000);
//指定來源，範圍，起始點，運算子小於等於，剛算出的臨界值，符合條件的用白色取代，mask選擇最低位數的B Channel
_bitmapDataNew.threshold(_bitmapDataSource, rect, pt, "<=", threshold, 0xFFFFFFFF, 0x000000FF);
//將運算完的結果顯示到_bitmap這個bitmap
_bitmap.bitmapData = _bitmapDataNew;

就這樣！很簡單的運算，出來的結果還蠻好玩的。點這裡看Demo。 另外，改變一開始的填滿色以及取代色，也可以做出雙色調圖片：