アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js を試した様子と結果です.

Fabric.jsでcanvasの図形の座標やサイズや色などプロパティを取得

イメージ

公開:

HTML5のcanvasでJavaScriptライブラリのFabric.jsを使用し、図形など要素(オブジェクト)の、座標やサイズや色などのプロパティを取得する方法です。

特にサイズはFabric.js特有のコツがあります。

要素の配置とデモ

先ずは下記初期値で図形を配置します。

var canvas = new fabric.Canvas('cvs');

var rect = new fabric.Rect({
  left: 110,		//左
  top: 70,			//上
  width: 120,		//幅
  height: 80,		//高さ
  angle: 20,		//角度
  strokeWidth: 5,	//線の幅
  stroke: 'blue',	//線の色
  fill: 'royalblue'	//塗潰し色
});

canvas.add(rect);

図形を、移動/拡縮/回転させてみてください。その都度変更された各値を表示させています。

拡縮させるときにつまむハンドルによっては left/top の座標が変わることがあります。左上の座標を基準にしているためです。回転の場合は常に変わります。

取得方法とコード例

要素(オブジェクト)の、座標/サイズ/角度/線の太さ/色は下記で取得できます。Math.round() はJavaScriptの持つ、四捨五入するオブジェクトです。

left = Math.round(rect.left);
top = Math.round(rect.top);
width = Math.round(rect.width * rect.scaleX);
height = Math.round(rect.width * rect.scaleX);
angle = Math.round(rect.angle);
strokeWidth = rect.strokeWidth;
stroke = rect.stroke;
fill = rect.fill;

注意点として、width/height常に初期値が取得され、ユーザーがサイズ変更した後の値を取得できません。倍率のscaleXscaleYをそれぞれに掛ける必要があります。

取得して表示する実際のコード例です。

//値取得と表示
function getProperty(){
  $('textarea').text(
    'left = ' + Math.round(rect.left) + '\n' +
    'top = ' + Math.round(rect.top) + '\n' +
    'width = ' + Math.round(rect.width * rect.scaleX) + '\n' +
    'height = ' + Math.round(rect.width * rect.scaleX) + '\n' +
    'angle = ' + Math.round(rect.angle) + '\n' +
    'strokeWidth = ' + rect.strokeWidth + '\n' +
    'stroke = ' + rect.stroke + '\n' +
    'fill = ' + rect.fill
  );
}

//変更されたときのイベント処理
canvas.on('object:modified', function(){
  getProperty();
});

上記で挙げた以外にも数多くのプロパティがあります。機会があれば別の記事で書きたいと思います。