選択した範囲の画像をハイライトする


上の画像の中をドラッグしてみてください。ドラッグした部分が明るくなります。

良いやり方かは分からないけど、次のようにしてみました。

  • 表示する画像を表示用とキャッシュ用に作成
  • 表示用の画像をColorMatrixFilterで透明度を下げて暗くする
  • 選択した範囲をキャッシュ用のBitmapDataから表示用のBitmapDataにコピー

あとはこれをどうにかして境界をぼかしたい。
どうやったら実現できるんだろう。
イメージはこんな感じ

追記:2007/11/26
ハイライトするプログラムを公開しました。BlurHighlight
以下ソースコード

package {
	import flash.display.*;
	import flash.events.MouseEvent;
	import flash.filters.ColorMatrixFilter;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	public class Study09Highlight extends Sprite {
		[Embed(source='assets/palau.jpg')]
		private var Palau:Class;
		private var beginPoint:Point = new Point(0, 0);
		private var endPoint:Point = new Point(0, 0);
		private var container:Sprite;
		private var bmp:Bitmap;
		private var cachedBmp:Bitmap;

		public function Study09Highlight() {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			container = new Sprite();
			addChild(container);
			bmp = new Palau();
			container.addChild(bmp);
			cachedBmp = new Palau();
			draw();
			container.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
		}

		private function onMouseDown(event:MouseEvent):void {
			beginPoint = endPoint = new Point(mouseX, mouseY);
			draw();
			container.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
			container.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		}

		private function onMouseMove(event: MouseEvent):void {
			endPoint = new Point(mouseX, mouseY);
			draw();
		}

		private function onMouseUp(event: MouseEvent):void {
			endPoint = new Point(mouseX, mouseY);
			draw();
			container.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
			container.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		}

		private function draw():void {
			var bmd:BitmapData = bmp.bitmapData;
			bmd.copyPixels(cachedBmp.bitmapData, new Rectangle(0, 0, cachedBmp.width, cachedBmp.height), new Point(0, 0));
			var filter:ColorMatrixFilter = new ColorMatrixFilter([
				1, 0, 0, 0, 0,
				0, 1, 0, 0, 0,
				0, 0, 1, 0, 0,
				0, 0, 0, 0.4, 0
			]);
			bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), filter);
			var sx:int, ex:int, sy:int, ey:int;
			if (beginPoint.x > endPoint.x) {
				sx = endPoint.x;
				ex = beginPoint.x;
			} else {
				sx = beginPoint.x;
				ex = endPoint.x;
			}
			if (beginPoint.y > endPoint.y) {
				sy = endPoint.y;
				ey = beginPoint.y;
			} else {
				sy = beginPoint.y;
				ey = endPoint.y;
			}

			bmd.copyPixels(cachedBmp.bitmapData, new Rectangle(sx ,sy, ex - sx, ey - sy), new Point(sx, sy));
		}
	}
}