サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJS 0.8.1: 破線を描く ー Graphics.setStrokeDash()メソッド

ID: FN1506003 Technique: HTML5 and JavaScript Library: EaselJS 0.8.1

Graphicsクラス
継承 Graphics → Object
ディレクトリ easeljs/display
setStrokeDash()メソッド
文法 setStrokeDash(segments, offset)
概要 破線のスタイルを設定または破棄する。
引数

segments − 破線のスタイルを、つぎのように線と余白の長さのふたつの数値エレメントに納めた配列。nullまたは空の配列を渡すと、破線の定めは破棄される。

[線の長さ, 余白の長さ]

offset − 破線を描き始める位置の数値。デフォルト値は0。

戻り値 参照したGraphicsインスタンス。

説明

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

図001■破線で描かれた円


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

  1. function drawDashRect(_graphics, thickness, color, _rect, segments, offset) {
  2.   _graphics.beginStroke(color)
  3.   .setStrokeDash(segments, offset)
  4.   .setStrokeStyle(thickness)
  5.   .drawRect(_rect.x, _rect.y, _rect.width, _rect.height);
  6. }

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

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

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



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


Copyright © 2001-2015 Fumio Nonaka.  All rights reserved.