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

HTML5テクニカルノート

EaselJS 0.8.0: Graphics.commandプロパティ

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

Graphics.commandプロパティ
文法 Graphicsオブジェクト.command
プロパティ値

Graphicsオブジェクトに対して、つくられ、または加えられた直近のGraphicsコマンドの参照。

説明

Graphics.commandプロパティは、Graphicsオブジェクトに対してつくったり、加えたりした直近のGraphicsコマンドの参照をもちます[*1]。たとえば、Graphics.beginFill()メソッドを呼出してGraphicsオブジェクトからGraphics.commandプロパティを得ると、塗りのGraphicsコマンドの参照が保てます。

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

すると、その後Graphicsオブジェクトに他の操作を加えてからでも、塗りをGraphicsコマンドのプロパティで動的に変えることができます。

fillCommand.style = "red";

Graphicsコマンドオブジェクトをつくるクラスは15あり、コンストラクタとその引数はつぎのとおりです。また、各引数はその名前でそれぞれのオブジェクトのプロパティになります。

  • Graphics.Arc(x, y, radius, startAngle, endAngle, anticlockwise)
  • Graphics.ArcTo(x1, y1, x2, y2, radius)
  • Graphics.BeginPath()
  • Graphics.BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  • Graphics.Circle(x, y, radius)
  • Graphics.ClosePath()
  • Graphics.Fill(style, matrix)
  • Graphics.LineTo(x, y)
  • Graphics.MoveTo(x, y)
  • Graphics.PolyStar(x, y, radius, sides, pointSize, angle)
  • Graphics.QuadraticCurveTo(cpx, cpy, x, y)
  • Graphics.Rect(x, y, w, h)
  • Graphics.RoundRect(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL)
  • Graphics.Stroke(style, ignoreScale)
  • Graphics.StrokeStyle(width, caps, joints, miterLimit)

[*1] Graphicsオブジェクトに描画するとき、内部的にGraphicsコマンドオブジェクトがつくられて、描画のキューに加えられます。たとえば、Graphics.beginFill()メソッドを呼出すと、GraphicsコマンドとしてGraphics.Fillオブジェクトがつくられます。Graphics.commandプロパティは、それらのうち直近のGraphicsコマンドオブジェクトを参照します。

[追記: 2015年6月2日] EaselJS 0.8.1で、Graphics.commandプロパティは、塗りや線を描く空の呼出しがあったときはnullを返すよう変更されました(「EaselJS 0.8.1: 改訂された項目」参照)。

例

以下のコード001は、ステージの真ん中に置いたShapeオブジェクトに、半径50ピクセルの青い円を描きます。そのうえで、Graphics.commandプロパティで、塗り(Graphics.beginFill()メソッド)と円の描画(Graphics.drawCircle()メソッド)のGraphicsコマンドを、ふたつの変数(fillCommandとcircleCommand)にそれぞれとりました(第2〜3行目および第15〜16行目)。そして、Shapeオブジェクトをクリックすると、これらのGraphicsコマンドプロパティにより塗り色(Graphics.Fill.style)と円の半径(Graphics.Circle.radius)をランダムに変えます(第19〜23行目)。コード001の動きは、つぎのサンプル001で確かめられます。

サンプル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()
      .set({x:canvas.width / 2, y:canvas.height / 2});
  7.   stage = new createjs.Stage(canvas);
  8.   stage.addChild(myShape);
  9.   myShape.addEventListener("click", changeCircle);
  10.   drawCircle(myShape);
  11.   stage.update();
  12. }
  13. function drawCircle(myShape) {
  14.   var myGraphics = myShape.graphics;
  15.   fillCommand = myGraphics.beginFill("blue").command;
  16.   circleCommand = myGraphics.drawCircle(0, 0, 50).command;
  17. }
  18. function changeCircle(eventObject) {
  19.   var randomColor = Math.floor(Math.random() * 0xFFFFFF);
  20.   var randomRadius = Math.random() * 50 + 20;
  21.   var color_str = createjs.Graphics.getRGB(randomColor);
  22.   fillCommand.style = color_str;
  23.   circleCommand.radius = randomRadius;
  24.   stage.update();
  25. }

作成者: 野中文雄
更新日: 2015年2月11日 EaselJS 0.8.0のリリースにともなってタイトルを「EaselJS NEXT: Graphics.commandプロパティ」から変更。リンクなど細かな補訂を加えた。
更新日: 2014年11月30日 Graphicsコマンドクラスのコンストラクタ一覧を追加。JavaScriptコードの一部修正。
作成日: 2014年11月29日

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