サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJS 0.8.0: Graphicsクラス

ID: FN1411005 Technique: HTML5 and JavaScript Library: EaselJS 0.8.0

Graphicsクラス
継承 Graphics → Object
ディレクトリ easeljs/display

説明

Graphicsクラスは、使いやすい描画のAPIを提供します。Canvasに描くベクターの手順を組立てて、指定したコンテキストに描画します。ShapeオブジェクトのGraphicsインスタンスに描けば、オブジェクトをEaselJSフレームワークの表示リストに加えて表示できます。あるいは、別につくったGraphicsインスタンスを使って、Canvasに直に描画することもできます。

Graphicsオブジェクトへの描画の仕方はふたつあります。

  1. Graphicsオブジェクトに対してメソッド(Graphics API)を呼出す。
  2. Graphicsコマンドのインスタンスをつくって描画のキューに加える。

第1に、Graphicsオブジェクトの参照に対してGraphicsクラスのメソッド(Graphics API)をよび出します。多くの描画アプリケーションのように、塗りと線を定めて、ベクターシェイプを描くので、わかりやすい手順です。また、Graphics APIは参照もとのGraphicsインスタンスを返すので、ドット(.)アクセスに続けてメソッドをいくつも呼出すことができます。

第2は、Graphicsコマンドのインスタンスをつくって、Graphics.append()メソッドで描画のキューに加えます。Graphics APIは内部的にGraphicsコマンドを使って描画しています。したがって、直にGraphicsコマンドを用いる方が、描画はより細かく制御できます。その代わり、手順はCanvasに近く、先にパスを誤りなくつくったうえで、塗りと線を描かなければなりません。

なお、Graphics APIの呼出しとGraphicsコマンドオブジェクトは、ひとつのコードの中で一緒に使えます。また、カスタムコマンドを加えることもできます。また、Graphics APIを呼出したとき、内部的につくられた直近のGraphicsコマンドオブジェクトは、Graphics.commandプロパティで参照できます(「EaselJS 0.8.0: Graphics.commandプロパティ」参照)。


例

つぎのコードは、Graphics APIを使った例です。Graphicsインスタンス(myGraphics)に幅1の黒い線と赤の塗りで、中心座標(0, 0)から半径30ピクセルの円を描きます。

var myGraphics = new createjs.Graphics();
myGraphics.setStrokeStyle(1);
myGraphics.beginStroke("#000000");
myGraphics.beginFill("red");
myGraphics.drawCircle(0,0,30);

Graphics APIが返す参照もとGraphicsインスタンス(myGraphics)にドット(.)アクセスすれば、前掲コードはつぎのようにメソッドの呼出しをつなげるように書替えられます(見やすく改行したものの、各行末にセミコロン(;)がないことにご注目ください)。

myGraphics.setStrokeStyle(1)
.beginStroke("#000000")
.beginFill("red")
.drawCircle(0,0,30);

Graphicsコマンドで描画するには、Graphicsコマンドのインスタンスをつくって、Graphics.append()メソッドで描画のキューに加えます[*1]。そして、まずパスを正しくつくったうえで、塗りや線を定めなければなりません。描画を始めるGraphicsコマンドには、静的プロパティGraphics.beginCmdを用います[*2]。

// パスの開始
myGraphics.append(createjs.Graphics.beginCmd);
// 塗りの前にパスを定める
var circle = new createjs.Graphics.Circle(0,0,30);
myGraphics.append(circle);
// つくったパスを塗る
var fill = new createjs.Graphics.Fill("red");
myGraphics.append(fill);}

以下のコード001は、ステージの真ん中に置いたShapeオブジェクトに、半径50ピクセルの青い円を描きます。そのための関数(drawCircle())は、Graphics.Circle()コンストラクタで円の描画、Graphics.Fill()コンストラクタで塗りのGraphicsコマンドオブジェクトをつくって、それぞれ変数(fillCommandとcircleCommand)に納めました(第16および第18行目)。Graphics.append()メソッドでGraphicsコマンドをGraphicsオブジェクトに加えれば円が描かれます(第17および19行目)。

そのうえで、Shapeオブジェクトをクリックすると、リスナー関数(changeCircle())が、Graphicsコマンドのプロパティにより塗り色(Graphics.Fill.style)と円の半径(Graphics.Circle.radius)をランダムに変えます(第22〜26行目)。コード001の動きは、つぎのサンプル001で確かめられます。なお、同じ処理はGraphics.commandプロパティを使ってもできます(「EaselJS 0.8.0: Graphics.commandプロパティ」の「例」参照)

サンプル001■円のインスタンスをクリックすると色と大きさがランダムに変わる

コード001■Shapeインスタンスをクリックすると描かれた円の塗り色と半径がランダムに変わる
  1. var stage;
  2. var fillCommand;
  3. var circleCommand;
  4. function initialize() {
  5.   var canvas = document.getElementById("canvas");
  6.   var myShape = new createjs.Shape();
  7.   myShape.set({x:canvas.width / 2, y:canvas.height / 2});
  8.   stage = new createjs.Stage(canvas);
  9.   stage.addChild(myShape);
  10.   myShape.addEventListener("click", changeCircle);
  11.   drawCircle(myShape);
  12.   stage.update();
  13. }
  14. function drawCircle(myShape) {
  15.   var myGraphics = myShape.graphics;
  16.   circleCommand = new createjs.Graphics.Circle(0, 0, 50);
  17.   myGraphics.append(circleCommand);
  18.   fillCommand = new createjs.Graphics.Fill("blue");
  19.   myGraphics.append(fillCommand);
  20. }
  21. function changeCircle(eventObject) {
  22.   var randomColor = Math.floor(Math.random() * 0xFFFFFF);
  23.   var randomRadius = Math.random() * 50 + 20;
  24.   var color_str = createjs.Graphics.getRGB(randomColor);
  25.   fillCommand.style = color_str;
  26.   circleCommand.radius = randomRadius;
  27.   stage.update();
  28. }

[*1] EaselJS 0.8.0のGraphics.drawCircle()メソッドの実装は、実際Graphics.Circleオブジェクトをつくって、Graphics.append()メソッドで描画キューに加えるだけの処理です。

Graphics.prototype.drawCircle = function(x, y, radius) {
  return this.append(new Graphics.Circle(x, y, radius));
};

なお、EaselJS 0.7.1のGraphics.drawCircle()メソッドの実装では、内部的にGraphics.arc()メソッドを呼出して、参照もとのGraphicsオブジェクトに円を描いていました。

Graphics.prototype.drawCircle = function(x, y, radius) {
  this.arc(x, y, radius, 0, Math.PI*2);
  return this;
};

Graphicsコマンドオブジェクトを備えたことにより、Graphics APIの処理が統一化されたといえます。

[*2] 静的プロパティGraphics.beginCmdは、Graphics.BeginPathインスタンスをもちます。

作成者: 野中文雄
更新日: 2015年2月11日 EaselJS 0.8.0のリリースにともなってタイトルを「EaselJS NEXT: Graphicsクラス」から変更。リンクなど細かな補訂を加えた。
更新日: 2014年12月3日 注[*1]を追加。
更新日: 2014年12月2日 サンプル001およびコード001を追加。
作成日: 2014年12月1日

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