EaselJS次期バージョンで用いられるGraphicsコマンドオブジェクト

EaselJS次期バージョンで用いられるGraphicsコマンドオブジェクト [Edit]

投稿者：野中文雄 | 投稿日：2014.12.04 | [CreateJS][HTML5][野中ゼミ]

EaselJS次期バージョンでGraphicsクラスの内部的な仕組みが変わります。新たに備わったGraphicsコマンドのクラスで描画が扱われるようになりました。

Graphicsコマンドとは

Graphicsクラスの描画メソッド(Graphics API)の使い方が変わる訳ではありません。これまでと同じようにメソッドは呼出せます。ただ、呼出されたGraphicsクラスのメソッドが、内部的にGraphicsコマンドのオブジェクトをつくって描画するということです。さらに、もし使いたければ、Graphicsコマンドを直に呼出すこともできます。Graphicsコマンドの描画の仕方はCanvasに近いので、より細かな扱いができます。

Graphicsコマンドは、描画の操作ごとにクラスが備わっています(Graphicsコマンドをつくるクラスについては「EaselJS NEXT: Graphics.commandプロパティ」の「説明」参照)。たとえば、塗り(Graphics.beginFill()メソッド)はGraphics.Fill、円を描く(Graphics.drawCircle()メソッド)ならGraphics.CircleクラスでGraphicsコマンドオブジェクトをつくります。それらのGraphicsコマンドオブジェクトは、Graphics.append()メソッドの引数に渡して、描画のキューに加えます。

たとえば、EaselJS次期バージョンの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;
};

EaselJS次期バージョンのGraphicsクラスについて詳しくは、「EaselJS NEXT: Graphicsクラス」をお読みください。

Graphicsコマンドオブジェクトを使う

Graphics APIでなく、Graphicsコマンドオブジェクトを使ってGraphicsインスタンスに描画してみます。つぎのサンプル001は、ステージの真ん中に置いたShapeオブジェクトに、Graphicsコマンドオブジェクトで半径50ピクセルの青い円を描きます。さらに、インスタンスをクリックすると、Graphicsコマンドオブジェクトのプロパティにより半径と色が変わります。具体的なコードの中身については、「EaselJS NEXT: Graphicsクラス」の「例」をお読みください。

サンプル001■EaselJS NEXT: Using Graphics command object

Graphics APIからGraphicsコマンドオブジェクトを得る

Graphics.commandプロパティを用いると、Graphics APIの呼出しからつくられたGraphicsコマンドオブジェクトの参照が得られます。すると、そのGraphicsコマンドオブジェクトのプロパティを後から変えることができます。「EaselJS次期バージョンに備わるGraphics.commandプロパティ」の「例」では、前掲サンプル001と同じ動きを、Graphics.commandプロパティで行っています。

F-site