【備忘録】逆引きFabric.js

11220 ワード
fabric.js fabric fabric テキストリンク

はじめに

Fabric.jsの機能で個人的に試したものを備忘録として残す。後日試した機能があれば追記する(かも)。

検証にはVue環境を使用している(下記参照)。
※Fabric.js本体の機能なのでF/Wには依存しない(はず)

実装

選択時の□(拡大/縮小・回転するやつ)を出さない

対象ObjectのhasControlsをfalseにする。

素体となるcanvas
<canvas id="theCanvas"></canvas>
描画スクリプト
const rect1 = new fabric.Rect({
  left: 100,
  top: 50,
  width: 31,
  height: 31,
  fill: 'red',
  hasControls: false, // ★
});
const canvas = new fabric.Canvas('theCanvas');
canvas.add(rect1);

選択時に前に出さない

CanvasのpreserveObjectStackingをtrueにする。

const rect1 = new fabric.Rect({/*赤*/});
const rect2 = new fabric.Rect({/*青*/});
const canvas = new fabric.Canvas('theCanvas', { preserveObjectStacking: true }); // ★
canvas.add(rect1, rect2);

後から追加するオブジェクトを背面に配置する

Canvas.insertAt()を使用する。

  • 第3引数がfalseの場合は挿入、trueの場合は置換される
  • 挿入の場合、第2引数のインデックスに配置され、元々インデックスが引数値以上のものは後ろにシフトされる
  • インデックスが大きいものが前面に表示される
const rect1 = new fabric.Rect({/*赤*/});
const rect2 = new fabric.Rect({/*緑*/});
const rect3 = new fabric.Rect({/*青*/});
const canvas = new fabric.Canvas('theCanvas', { preserveObjectStacking: true });
canvas.add(rect1, rect2);
canvas.insertAt(rect3, 1, false); // ★

前面／背面を後から変更する

変更対象のObjectインスタンスのメソッドを利用する。

  • 最前面にする場合はbringToFront()
  • 最背面にする場合はsendToBack()
  • 任意のインデックスにする場合はmoveTo()（対象Objectが引数のインデックスに配置され、元々インデックスが引数値以上のものは後ろにシフトされる）
クリックイベント定義
// 初期描画までは上と同じ
const frontRed = () => { rect1.bringToFront(); };
const frontGreen = () => { rect2.bringToFront(); };
const frontBlue = () => { rect3.bringToFront(); };
const backRed = () => { rect1.sendToBack(); };
const backGreen = () => { rect2.sendToBack(); };
const backBlue = () => { rect3.sendToBack(); };
const midRed = () => { rect1.moveTo(1); };
onClick割当
<button @click="frontRed">赤を最前面</button>
<button @click="frontGreen">緑を最前面</button>
<button @click="frontBlue">青を最前面</button>
<br>
<button @click="backRed">赤を最背面</button>
<button @click="backGreen">緑を最背面</button>
<button @click="backBlue">青を最背面</button>
<br>
<button @click="midRed">赤を真ん中</button>

参考