fabricjs
Fabricjsキャンバスイベント

構文

1. on（eventName、handler） - オブジェクトへのコールバックとともにイベントリスナーをアタッチします。

2. off（eventName、handler） - オブジェクトからイベントリスナーを削除します。この関数を引数として呼び出すと、オブジェクトのすべてのイベントリスナーが削除されます。

3. trigger（eventName、optionsopt） - イベントとオプションのオプションオブジェクトを起動します。

パラメーター

備考

ファブリックjsキャンバスイベントデモ

<canvas id="c" width="400" height="400"></canvas>

var canvas = new fabric.Canvas("c");

canvas.on('mouse:up', function () {
  console.log('Event mouse:up Triggered');
});

canvas.on('mouse:down', function () {
  console.log('Event mouse:down Triggered');
});

canvas.on('after:render', function () {
  console.log('Event after:render Triggered');
});

canvas.on('object:moving', function () {
  console.log('Event object:moving Triggered');
});

canvas.on('object:modified', function () {
  console.log('Event object:modified Triggered');
});

var text = new fabric.Textbox('Hello world', {
  width:250,
  cursorColor :"blue"
});
canvas.add(text);

上のコードは、Fabric.jsのイベントAPIがどのように機能するかを示しています。呼び出すことにより、 onキャンバスインスタンス上の、あるいはのようなFabric.js他のオブジェクト、上Rectインスタンス、あなたはそれらのイベントを聞くことができるし、リスナーがトリガされたとき、あなたは彼らに渡されたコールバックは、同様にトリガされます。