[Flex] ペイントの描画履歴を残す

Adobe Flexで線を描くだけの簡単なペイントツールを作成していたのですが、一度描いて消した絵をふたたび画面に表示させるため、どうしても描画履歴を残す必要があったのでその時のTipsを残します。（と言っても重要な部分のみですが)

基本的には、マウスで絵を描くペイントツールですから、マウスの移動中に発生するイベント(MouseEvent.MouseMove)をハンドリングする関数の中で処理を行うという形になります。

まずは、フィールドとしてはGraphicsｵﾌﾞｼﾞｪｸﾄと履歴を格納する配列を用意しておきます。

import __AS3__.vec.Vector;

_graphics:Graphics;

_graphicsData:Vector.< IGraphicsdata>

IGraphicsDataインターフェースは描画情報を管理するためのインターフェースです。

次に、イベントハンドリングする関数の中身ですが、まずは色や太さなどの設定を行います。

private function drawing(event:MouseEvent):void

{

// 色の設定

var solidFill:GraphicsSolidFill = new GraphicsSolidFill(LINE_COLOR);

// 線のスタイルの設定(引数は線の太さ）

var stroke:GraphicsStroke = new GraphicsStroke(PEN_SIZE);

// 先端の形(無し、四角、丸み）の設定

stroke.caps = CapsStyle.ROUND;

stroke.fill = solidFill;

次にGraphicsPathｵﾌﾞｼﾞｪｸﾄに対して、現在のマウスの座標と前回この関数が呼ばれたときのマウス座標を元に線描画の情報を入れます。GraphicsPathクラスは線を描いたところの描画命令とそれらの座標のコレクションになります。そして、先ほど設定した色や太さの情報と一緒に配列にプッシュします。

// 描画履歴を格納

var path:GraphicsPath = new GraphicsPath();

path.moveTo(_prevX, _prevY);

path.lineTo(event.localX, event.localY);

_graphicsData.push(stroke, path);

もちろん、描画も忘れてはなりません。

// 描画

_graphics.lineStyle(PEN_SIZE, LINE_COLOR);

_graphics.moveTo(_prevX, _prevY);

_graphics.lineTo(event.localX, event.localY);

最後にマウス座標をこの関数が再び呼ばれるときに備えて、その座標を別の変数に入れておきます。

_prevX = event.localX; 
_prevY = event.localY;

}

描いた絵を再び表示するためには、以下のように行います。

_graphics.drawGraphicsData(_graphicsData);

以上です。

参考サイト：

 　　　　「図形の描画履歴を保存する」　・・・　http://hkpr.info/flash/game/sample/s088.php