EaselJS次期バージョンに備わるGraphics.commandプロパティ

EaselJS次期バージョンに備わるGraphics.commandプロパティ [Edit]

投稿者：野中文雄 | 投稿日：2014.12.01 | [CreateJS]

An example of the new Graphics.command property of EaselJS

EaselJS次期バージョン(NEXT)に新たにGraphics.commandプロパティが備わりました。その使い方としてサンプルコードをご紹介します。

The upcoming (NEXT) version of EaselJS implements the new Graphics.command property. This article shows an example code.

Graphics.commandプロパティ / Graphics.command property

Graphicsインスタンスに描画メソッドを呼出すと、内部的にGraphicsコマンドオブジェクトがつくられます。Graphics.commandプロパティは、直近のGraphicsコマンドオブジェクトを参照します。

Each call of drawing method on a Graphics instance generates a Graphics command object. The last command object to be created would be referred via the Graphics.command property.

fillCommand = myGraphics.beginFill("blue").command;

その参照に対して後からプロパティを変えると、描画に動的に反映されます。

Its reference can be updated later on and will reflect the changes then.

fillCommand.style = "red";

例 / Example

以下のコード001は、ステージの真ん中に置いたインスタンスに、半径50ピクセルの青い円を描きます。そして、インスタンスをクリックすると、円の半径と色がランダムに変わります。jsdo.itにも併せてコードを掲げます。

The Code 001 below draws a blue circle with 50 pixels radius in the center of the stage. Then clicking on the circle changes its color and radius randomly. The code can be tested in jsdo.it as the below.

なお、Graphics.commandプロパティとコードの中身について、詳しくは「EaselJS NEXT: Graphics.commandプロパティ」をお読みください。

コード001■マウスクリックで円の半径と塗りを動的に変える

var stage;
var fillCommand;
var circleCommand;
function initialize() {
	var canvas = document.getElementById("myCanvas");
	var myShape = new createjs.Shape();
	stage = new createjs.Stage(canvas).set({x:canvas.width / 2, y:canvas.height / 2});
	stage.addChild(myShape);
	myShape.addEventListener("click", changeCircle);
	drawCircle(myShape);
	stage.update();
}
function drawCircle(myShape) {
	var myGraphics = myShape.graphics;
	fillCommand = myGraphics.beginFill("blue").command;
	circleCommand = myGraphics.drawCircle(0, 0, 50).command;
}
function changeCircle(eventObject) {
	var randomColor = Math.floor(Math.random() * 0xFFFFFF);
	var randomRadius = Math.random() * 50 + 20;
	var color_str = createjs.Graphics.getRGB(randomColor);
	fillCommand.style = color_str;
	circleCommand.radius = randomRadius;
	stage.update();
}

Code 001•Dynamicall changing color and radius of a circle with mouse click

F-site