はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

CreateJS でSVG画像を扱う

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 を使うことになる。

SVGURIは、.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();
    };
  }

Bitmapインスタンスのスケールを変更して描画

Bitmapインスタンスのスケールを変更してみます。

scaleX, scaleY プロパティ(default: 1)を持っているので、 この値を変更することでスケールを変更できる。

ここで、SVG画像をCanvas で width heightを変更して、drawImage すると、 Firefox, Chromeで挙動がちがいます。 詳しくはこちら。

cartman0.hatenablog.com

 

codepen.io