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

HTML5テクニカルノート

EaselJS 0.7.0のGraphics.inject()メソッド

ID: FN1307005 Technique: HTML5 and JavaScript Library: EaselJS 0.7.0

Graphics.inject()メソッド
文法 Graphicsオブジェクト.inject(callback, data)
概要 Graphicsオブジェクトのキューに、Context2D (Canvas) APIの呼出しを挿入する。
引数

callback ー Context2Dオブジェクトをスコープとして呼出すコールバック関数。

data ー コールバック関数の引数に渡す任意の値。
戻り値 メソッドが呼出されたGraphicsオブジェクト。

説明

Graphicsオブジェクトのキューに、Context2D (Canvas) APIの呼出しを挿入します。第1引数のコールバック関数(callback)は、他も含めた描画処理の中に決められた順序で呼出されます。コールバック関数は、参照するGraphicsオブジェクトが描画されるCanvasのContext2Dオブジェクトをスコープとして実行されます。そのとき、第2引数のオブジェクト(data)がパラメータとして渡されます。

このメソッドは中・上級者向けに備えられました。この機能を使えば、Context2Dへの命令を他のツールから出力して、処理に加えられます。また、Canvasに直に呼出していた処理を、表示リストの中から実行できます。さらに、カラーや線のスタイルをGraphicsインスタンスの中で動的に変え続けることもできるでしょう。ただし、一般的に用いられるメソッドではありません。

Graphicsキューはつぎのような流れで描画します。

  1. 塗りや線のスタイルなどを定めてパスを始める。
  2. グラフィックスを描く。
  3. fill()やstroke()メソッドで描画を終える。

Graphics.inject()メソッドを使えば、ひとつのパスの中で塗りや線のスタイルが変えられます。ただし、パスの塗りや線をCanvasに描くには、前述3の描画を終える処理がなければなりません。Graphics.inject()メソッドの前に、Graphicsクラスの塗りや線を始めるメソッドが呼出されていれば、描画終了の処理は内部的に行われます。


例

まず、Canvasのメソッドで塗りの矩形を描いてみましょう。そのうえで、その中のCanvasへの描画の処理を、Graphics.inject()メソッドで実行します。HTMLドキュメントには、つぎのようにcanvas要素を置いて、id属性に識別子("myCanvas")を与えます。そして、body要素からはonload属性に定めた関数(initialize())を呼出すことにしました。

<body onLoad="initialize()">
  <canvas id="myCanvas" width="240" height="180"></canvas>
</body>

以下のコード001は、Canvasのメソッドで青い塗りの矩形を描きます(図001)。fillStyleプロパティは塗り色を決め、fillRect()メソッドが引数で渡された領域に矩形を描きます(「<canvas>要素で定めた領域に図形を描く」参照)。

図001■Canvasに青い正方形が描かれる
図001

コード001■Canvasのメソッドで塗りの矩形を描く
  1. var context;
  2. function initialize() {
  3.   var canvasElement = document.getElementById("myCanvas");
  4.   context = canvasElement.getContext("2d");
  5.   drawRectangle(10, 10, 100, 100, "blue");
  6. }
  7. function drawRectangle(x, y, width, height, color) {
  8.   context.fillStyle = color;
  9.   context.fillRect(x, y, width, height);
  10. }

このコード001のCanvasへの描画を、Graphics.inject()メソッドで実行してみましょう。script要素には予めEaselJS 0.7.0(easeljs-0.7.0.min.js)を読込んでおきます。

<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>

以下のコード002は、描画用のShapeオブジェクトをステージ(Stageオブジェクト)に置き、Graphicsオブジェクトを取出します(第5〜6および第8行目)。Graphics.inject()メソッドの第1引数に定めたコールバック関数には、第2引数の値ひとつしか渡せません。そこで、オブジェクト(settings)にプロパティで値を納め、第2引数としました(第7および第9行目)。

コールバック関数はContext2Dオブジェクトをスコープとして呼出されますので、Canvasのメソッドはthisを参照して呼出します(第13〜14行目)。そして、忘れてならないのが、Stage.update()メソッドでステージを描替えることです(第10行目)。コード002は、jsdo.itにも掲げました。

コード002■Graphics.inject()メソッドでCanvas APIにより塗りの矩形を描く
  1. var stage;
  2. function initialize() {
  3.   var canvasElement = document.getElementById("myCanvas");
  4.   stage = new createjs.Stage(canvasElement);
  5.   var myShape = new createjs.Shape();
  6.   var drawingGraphics = myShape.graphics;
  7.   var settings = {
        x: 10,
        y: 10,
        width: 100,
        height: 100,
        color: "blue"
      };
  8.   stage.addChild(myShape);
  9.   drawingGraphics.inject(drawRectangle, settings);
  10.   stage.update();
  11. }
  12. function drawRectangle(settings) {
  13.   this.fillStyle = settings.color;
  14.   this.fillRect(settings.x, settings.y, settings.width, settings.height);
  15. }

もうひとつ、前掲コード002に手を加えて、矩形の塗りをアニメーションさせてみましょう。Ticker.tickイベントのリスナー関数にアニメーションの処理を定めます。スクリプト全体は、後にコード003として掲げます。

まず、Graphics.inject()メソッドの第2引数に渡すオブジェクト(settings)は、新たに定めるアニメーションの関数でも使いたいので、ローカル変数とせず、つぎのように関数の外で宣言します(第2行目)。与えるオブジェクトの中身は、前掲コード001のままです(第9行目)。Ticker.tickイベントのリスナーには、これから定めるアニメーションの関数(changeColor())を渡しました(第13行目)。

  1. var settings;
  1. function initialize() {
      // var settings = {
  1.   settings = {
        x: 10,
        y: 10,
        width: 100,
        height: 100,
        color: "blue"
      };
  1.   drawingGraphics.inject(drawRectangle, settings);
  1.   createjs.Ticker.addEventListener("tick", changeColor);
  2. }

アニメーションのリスナー関数(changeColor())は、つぎのように塗りの色相を周期的に変えます。色相は角度で決まりますので、その値を入れる変数(angle)が予め宣言されています(第3行目)。リスナー関数は、0から360度の範囲で周期的に角度を増やします(第16行目)。静的メソッドGraphics.getHSL()は、引数に渡した色相・彩度・明度の値から、描画のメソッドに与えるカラー指定の文字列を返します。

Graphics.getHSL(色相, 彩度, 明度)

そこで、Graphics.getHSL()の戻り値を、Graphics.inject()メソッドの第2引数に渡したオブジェクト(settings)のブロパティに定めます(第17行目)。ご注目いただきたいのは、アニメーションの関数(changeColor())の中ではGraphicsクラスの描画メソッドをひとつも呼出していないことです。

  1. var angle = 0;
  1. function changeColor(eventObject) {
  2.   angle = (angle + 3) % 360;
  3.   settings.color = createjs.Graphics.getHSL(angle, 100, 50);
  4.   stage.update();
  5. }

試してみると、Canvasに描かれた正方形の色相が周期的に変わるアニメーションになります(図002)。アニメーションの関数(changeColor())からStage.update()メソッドを呼出すと、Canvasが描き直されます(第18行目)。そのとき、Graphics.inject()メソッドの第2引数に渡しておいたオブジェクト(settings)のプロパティ値が内部的に参照されるのです。そのため、Graphicsクラスの描画メソッドを使わなくても、描かれる塗り色が変わります。コード003のスクリプト全体は、以下のとおりです。併せて、jsdo.itにも掲げました。

図002■Canvasに描かれた正方形の色相が周期的に変わる
図002左 → 図002右

コード003■Graphics.inject()メソッドで塗りの色相をアニメーションさせる
  1. var stage;
  2. var settings;
  3. var angle = 0;
  4. function initialize() {
  5.   var canvasElement = document.getElementById("myCanvas");
  6.   stage = new createjs.Stage(canvasElement);
  7.   var myShape = new createjs.Shape();
  8.   var drawingGraphics = myShape.graphics;
  9.   settings = {
        x: 10,
        y: 10,
        width: 100,
        height: 100,
        color: "blue"
      };
  10.   stage.addChild(myShape);
  11.   drawingGraphics.inject(drawRectangle, settings);
  12.   stage.update();
  13.   createjs.Ticker.addEventListener("tick", changeColor);
  14. }
  15. function changeColor(eventObject) {
  16.   angle = (angle + 3) % 360;
  17.   settings.color = createjs.Graphics.getHSL(angle, 100, 50);
  18.   stage.update();
  19. }
  20. function drawRectangle(settings) {
  21.   this.fillStyle = settings.color;
  22.   this.fillRect(settings.x, settings.y, settings.width, settings.height);
  23. }


[*1] Stage.update()メソッドの呼出しは、Graphics.inject()メソッドのコールバック関数の中には含めないようにしましょう。

Canvasの描画の手順は、EaselJSのGraphicsクラスのステートメントを書く順序と異なります。そのため、Graphicsキューに入れた処理を、Canvasの流れに直して実行します。コールバック関数の中にStage.update()メソッドを書くと、描画し終わるのを待たずに呼出されたりして、ステージが正しく描直されません。

作成者: 野中文雄
更新日: 2013年10月5日 EaselJS新バージョンのリリースにともない、タイトルを「EaselJS次期バージョン候補のGraphics.inject()メソッド」から「EaselJS 0.7.0のGraphics.inject()メソッド」に変え、本文に補正を加えた。また、「例」にコード003とその解説を追加。
作成日: 2013年7月24日

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