説明

EaselJS 0.8.1に備わったGraphics.setStrokeDash()メソッドは、描画する線に破線のスタイルが定められます(図001)。第1引数の配列には数値エレメントをふたつ加え、初め(インデックス0)が線の長さ、後(インデックス1)が余白の間隔を定めます。第2引数の数値で、描き始める位置が変えられます。他のメソッドの使い方は、実線と同じです。

図001■破線で描かれた円

例

つぎの関数(drawDashRect())は、第1引数(_graphics)のGraphicsオブジェクトに第2引数以降の設定で破線の矩形を描きます。なお、第5引数(segments)は、破線のスタイルを定めた数値エレメントふたつの配列です。

function drawDashRect(_graphics, thickness, color, _rect, segments, offset) {   _graphics.beginStroke(color)   .setStrokeDash(segments, offset)   .setStrokeStyle(thickness)   .drawRect(_rect.x, _rect.y, _rect.width, _rect.height); }

Graphics.setStrokeDash()メソッドの第2引数で定める破線の引き始めの位置を動的に帰ると、破線をアニメーションさせることができます。

つぎのサンプル001は、長方形選択ツールのように、矩形の破線がアニメーションします(いわゆる「蟻の行進」)。また、マウスドラッグで範囲を変えることもできます。破線の矩形を描く関数(drawDashRect())は、前掲の例と基本的に同じです。ただし、Graphics.setStrokeDash()メソッドの第2引数に与える値(offset)は、アニメーションさせるためグローバルな変数に定めています。

サンプル001■EaselJS 0.8.1: Range selection interface - marching ants

作成者: 野中文雄
作成日: 2015年6月5日