その他
2009年12月1日
BitmapData.thresholdで画像の特定の色を変える
こんにちは。最近Flexばかりいじっている松田です。今日もFlexネタです。
今回は、与えられた画像の特定のエリアをハイライトさせるスクリプトを作ってみました。
正確にはマウスオーバーしたピクセルと同じ色のエリアのハイライトをしています。
画像の読み込みには大抵の場合Loaderを使用しますが、Loaderで画像を読み込むと画像がBitmap型に変換されてLoader.contentに入ります。
このBitmapは画像データのただの器のようなもので、画像自体に手を加えるには、Bitmap.bitmapDataをイジることになります。
BitmapDataには画像処理を行ううえで便利なメソッドが多く用意されていますが、その中から今回はthresholdメソッドを使ってます。
おおまかな流れは以下のとおり。
1. 画像の取得、配置
↓
2. マウスカーソル位置の画像の色を取得
↓
3. 画像内のその色の部分を違う色に置き換えて表示
↓
4. マウスが違う色の上に移動したら元の画像に置き換える
3番の色を変更させる部分にBitmapData.thresholdを使用してます。
thresholdは直訳すると「しきい値」。与えられたBitmapDataに色の閾値と判定条件（'<=’, ‘==’, ‘>=’, …) を与え、その条件に一致した部分の色を指定した色に置き換えるメソッドです。
bitmapData.threshold(bitmapData, bitmapData.rect, new Point(0,0), '==', thresholdColor, replaceColor, 0xFFFFFF);
上記のように指定した場合、
if ((各ピクセルの色 & 0xFFFFFF) == (thresholdColor & 0xFFFFFF)) {
各ピクセルの色を replaceColor に変更
}
こんな処理になります。
実際はもう一つ引数があるけど今回は無視。
使用した画像がこれ。
そして下に表示されているのが作成したFlashです。
Flash上で右クリック→「ソースの表示」でソースコードが表示できます。
ほんとは色を変えたエリアの周りをピカっと光らせたいけど、やりかたがわかりません・・・。
