Fabric.jsでcanvasのイベントを取得して関数と関連付ける

公開：2020-01-15

Fabric.jsはcanvasでの各種イベントを取得することができます。ここではjQueryのonメソッドでイベントと関数を対応づけ、そのイベントに応じた処理をする例を2つほど挙げています。

また全てのイベントの種類をリストしています。

クリックを取得

先ずユーザによるクリックを取得する例です。mouse:downイベントを取得し、クリックされた要素のtypeを表示しています。

type =

<canvas id="cvs" width="300" height="240"></canvas>
<p>type = <output id="res"></output></p>

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

canvas.on('mouse:down', function(options) {
  if (options.target) {
    $('#res').text(options.target.type);
  }
});

targetが対象の要素となります。

移動を取得

次は要素の移動と離したイベントを取得する例です。移動中に透明度をつけると同時に拡大し、離すと戻ります。

//要素を移動
function objectmoving(options) {
  if (options.target) {
    options.target.set({opacity: .5, scaleX: 1.3, scaleY: 1.3});
  }
}

//要素を離す
function mouseup(options) {
  if (options.target) {
    options.target.set({opacity: 1, scaleX: 1, scaleY: 1});
  }
}

//関連付け
canvas.on({
  'object:moving': objectmoving,
  'mouse:up': mouseup
});

要素の移動と離したそれぞれのイベントハンドラを用意し、onメソッドで同時に関連付けた例です。

イベントの種類

Fabric.jsではcanvasにおいて下記のイベントを取得できます。

object:modified
object:rotated
object:scaled
object:moved
object:skewed
object:rotating
object:scaling
object:moving
object:skewing
object:selected this event is deprecated.event: use selection:created
before:transform
before:selection:cleared
selection:cleared
selection:updated
selection:created
path:created
mouse:down
mouse:move
mouse:up
mouse:down:before
mouse:move:before
mouse:up:before
mouse:over
mouse:out
mouse:dblclick
event:dragover
event:dragenter
event:dragleave
event:drop

例えば skewing は長方形を平行四辺形にする変形です。

このように、多種多様なイベントが用意されていて、ユーザ操作による可能性を広げてくれます。