読者です 読者をやめる 読者になる 読者になる

やったこと

webサービスを作るときに考えたことを垂れ流します

「Fabric.js」のcanvasの参照の仕方・オブジェクトの参照の仕方

「Fabric.js」はHTML5canvas要素を扱いやすくしてくれる便利なjavascriptライブラリです。
例えばFabric.jsを使ってcanvas上に「○」を描くときは以下のようにします。

var canvas = new fabric.Canvas("mycanvas");
var circle = new fabric.Circle({
  left: 100,
  top: 100,
  fill: 'red',
  radius:200
});
canvas.add(circle);


このFabric.js、試しにいろいろ触ってみたのですが、なんだか分からないことがいろいろあります。

例えば、上記で新たに生成した「canvas」をよそから参照するにはどうしたらいいのか。しばらく調べて見たのですが、どうやら自力でどこかに格納するしか方法はないようです。

「stack overflow」では以下のような方法が紹介されていました。

//fabricの領域に格納
var x = new fabric.Canvas("mycanvas");
document.getElementById("mycanvas").fabric = x;
//fabricの領域を参照
var y = document.getElementById("mycanvas").fabric;

javascript - Get the canvas object while using fabric js - Stack Overflow


また、上記で「canvas.add」された「○」の要素はどこに格納されているのか。どうやらこれは「item」という領域に入っているようです。例えばさきほど描画した「○」の要素を取り出して削除するときは以下のようにします。

  canvas = document.getElementById("mycanvas").fabric;
  circle = canvas.item(0);
  canvas.remove(circle);


「index0番」に「○」が入っていることを覚えておかないといけない。これはちょっと不便ですね。index何番に何が格納されているのか、自前でテーブルを作って管理しておかないといけなくなりそうです。オブジェクトにnameを付けられれば便利なのですが、今のところそういった機能はないみたいです。

「stack overflow」では自力でそういったものを作って対応している頑張り屋さんがいました。
canvas - Fabric.js: Get objects by name - Stack Overflow


「Fabric.js」はまだ発展途上のライブラリなのでしょうか。ドキュメントが足りなくてなんだか使いこなすのに手こずってしまいます・・。