分12前回は,BoxBlurFilterによりぼかしたイメージのインスタンスに,AlphaMaskFilterでマスクしたもとのイメージのインスタンスを重ね,マウスクリックした部分のアルファを上げていくという表現までつくった(第8回コード3⁠)⁠。参考までに,jsdo.itのサンプルを掲げておく。今回は,ドラッグでアルファマスクを描くようにしよう。マウスポインタの座標を直線で結ぶドラッグしている間マウスポインタの座標を調べ,アルファマスクのShapeインスタンスにその軌跡を描く。座標は直線で結ぶことにしよう。直線を引くのに使うメソッドは,Graphics.moveTo()とGraphics.lineTo()だ。描き始めの座標をGraphics.moveTo()メソッドによって決める。その後,Graphics.lineTo()メソッドで座標を直線で結んでいく。線のスタイルや色は,それぞれGraphics.setStrokeStyle()とGraphics.beginStroke()メソッドで定める(⁠「⁠EaselJSのGraphicクラスで2次ベジエ曲線を描く」参照⁠)⁠。y座標)...;スクリプトは前回のコード3に手を入れていく。マウスイベントの扱いは,画像を読込み終えたLoadQueue.fileloadイベントのリスナー関数(draw())に加える。ステージ上でマウスボタンを押すStage.stagemousedownイベントでドラッグが始まり(startWipe()⁠)⁠,ボタンを放すStage.stagemouseupイベントによりドラッグは終わる。ドラッグしている間のアルファマスクのアニメーションは,Ticker.tickイベントのリスナー(wipe())が行う。wipe);}リスナー関数は前述3つのイベントごとに役割を分けて,以下のように書替える。Stage.stagemousedownイベントのリスナー(startWipe())は,描き始めのマウスポインタ座標をPointオブジェクトの変数(mousePoint)に納める。ドラッグが始まったことを示す変数(isDrawing)はtrueにした。アルファマスクを描くGraphicsオブジェクトには,Graphics.setStrokeStyle()メソッドで線のスタイルだけ定めた。マスクそのものは,ドラッグの関数(wipe())が描く。メソッドの第2および第3引数で,線の端と角を丸く("round")した(引数について詳しくは前出「EaselJSのGraphicクラスで2次ベジエ曲線を描く」参照⁠)⁠。ドラッグでマスクを描く関数(wipe())は,Ticker.tickイベントのリスナーに定めた。ドラッグしていることは,変数(isDrawing)をif条件で確かめてから,描画に入る。マウスポインタの座標は予めローカル変数(mouseXとmouseY)にとっておく。アルファマスクのGraphicsオブジェクトにアルファつきのカラーを定めて,マウスポインタの前の座標から今の座標までの直線を描いている。つぎの線描のために,マウスポインタ座標はPointオブジェクトの変数(oldPoint)に納めた。マウスボタンを放すStage.stagemouseupイベントでドラッグは終わる。そこで,ドラッグしていることを示す変数にfalseを与える。これら3つのイベントリスナーを定めることにより,アルファマスクがドラッグで描ける(図1⁠)⁠。アルファマスクがドラッグで描かれるscript要素に書いたJavaScript全体は,つぎのコード1のとおりだ。前掲のコードではマスクに軌跡が正しく描かれているかを確かめるため,線は細くしてアルファも高めにした(図1⁠)⁠。コード1は,目指す表現に合わせて線は太く,アルファも下げてある(図2⁠)⁠。