CreateJS でSVG画像を扱う

CreateJS でSVG を扱うときのメモ。

CreateJSのバージョン

今回使用するEaselJS と PreloadJSのバージョンを書いておく。

EaselJS 0.8.1
PreloadJS 0.6.1

CreateJSでSVGを描画

PreloadJSでSVGの読み込み

外部SVGファイルはPreloadJS で読み込むことができる。

SVGを読み込むとき、XHR を使わないと、 Firefoxでは「構文エラーです」と出て読み込みできなかったので、XHRは有効にして使う。 XHR を使うとき、CORS に気をつける。とりあえず、DroboxのPublic では問題ない模様。

今回は、拡張子.svg 付きのURLなので、 SVGファイルと自動的に判断されて読み込まれる。が、SVGと指定して読み込みたい場合は、 LoadQueue.loadFile() で、type を指定する。 SVGの場合は、LoadQueue.loadFile({src: file, type: createjs.AbstractLoader.SVG}); とすればいい。


 var file = '~~~.svg';

var loader = new createjs.LoadQueue(true); //XHRを有効
loader.addEventListener("fileload", draw);
loader.loadFile({src: file, type:　createjs.AbstractLoader.SVG}); //SVGと指定

読み込み成功時のコールバック

今、 loader.addEventListener("fileload", draw); としているので、ファイルが読み終わると、 draw関数がコールバックとして呼ばれる。

コールバック関数が呼ばれると、引数に読み込み結果が含まれている。実際に読み込んだデータは、 .result プロパティに入っている。


function draw(eventObj) {
  console.log(eventObj.result);
}

SVGを読み込むと、.resultプロパティは、パースされたSVG要素(JavaScriptObject) になっている。

実際にどういうデータになっているか見てみると、元のSVGに、さらにsvgタグがラップされているようになっている。


<svg style="visibility: visible;">
  <svg >
  ~~~
   </svg>
</svg>

元のSVGデータの情報にアクセスしたい場合は、 .resultプロパティから、 .childNodes[0]でアクセスできる。また、オブジェクトでなく、元のSVGの文字列が欲しい場合は、 innerHTML で取得できる。


function draw(eventObj){
  var innerObj = eventObj.result.childNodes[0];
  console.log(innerObj);

  var innerHTML = eventObj.result.innerHTML;
  console.log(innerHTML);
  /*
    '<svg>
      ~~~
    </svg>'
  */
}

DOM にSVG要素を追加するなら、 .resultプロパティ をDOMに追加するだけで SVG（タグ）を表示できる。


function draw(eventObj){
  document.body.appendChild(eventObj.result):
}

Bitmapインスタンスにして描画

Bimapインスタンスの生成

jpg, pngでも同様ですが、CreateJS ではCanvasに画像を描画するとき、 Bitmap インスタンスを作る必要がある（Canvas のdrawImage で描画している模様）。

Bitmapインスタンスは、 HTMLImageElement, HTMLCanvasElement, HTMLVideoElement またはURI を入力することで作られる。SVGElementは対応していないので、 URI を使うことになる。

SVGのURIは、.result でなく、 .item.src に含まれている。ので、以下の様に書くとBitmapインスタンスを生成できる。

また、URI からBitmapを生成すると、URIから画像をロードしてくるので、 Preload していてもそのデータは使われないので注意。


function draw(eventObj){
  var bitmap = new createjs.Bitmap(eventObj.item.src);
}

URI から画像をロードしたときのイベント

Btimapインスタンスは、 imageプロパティを持ち、 JavaScirpt のImageオブジェクトが入ってます。 Bitmapのインスタンスの描画というのは、drawImage でのこの imageプロパティを描画しています。

なので、bitmap.image.onload=function(){}; で、ロード終わりの処理を書ける。


  function draw(eventObj){
    var bitmap = new createjs.Bitmap(eventObj.item.src);

    bitmap.image.onload = function(){
      ~~~
      stage.addChild(bitmap);
      stage.update();
    };
  }

サイズの取得

SVGElement は、 width, height プロパティを持たないが、 Bitmapインスタンスのimage プロパティから width, height を求めることができる。


  function draw(eventObj){
    var bitmap = new createjs.Bitmap(eventObj.item.src);

    bitmap.image.onload = function(){
      var w = this.width;
      var h = this.height;
      ~~~
      stage.addChild(bitmap);
      stage.update();
    };
  }