FabricJS

【JavaScript】【Fabric.js】マウスやオブジェクト操作時に発生するイベントまとめ

JavaScriptのFabric.jsはキャンバスで色々な操作をする際にとても便利なライブラリ。

マウス操作やオブジェクト操作に対するイベントトリガーも豊富に用意されている。

代表的な操作をした際に、どのようなイベントがどのような順番で発生するのかをまとめる。

canvas.onでハンドリング可能なイベント一覧

canvas.onでハンドリングできるイベントの一覧。

イベント名発生タイミング
object:modifiedmoved、scaled、rotated、skewed後
object:movingオブジェクト移動中
object:scalingオブジェクト伸ばし中
object:rotatingオブジェクト回転中
object:skewingオブジェクト絞り中
object:movedオブジェクト移動後
object:scaledオブジェクト伸ばし後
object:rotatedオブジェクト回転後
object:skewedオブジェクト絞り後
before:transformmouse:downの直前
before:selection:cleared選択解除直前(まだ選択状態)
selection:clearedオブジェクト選択時
selection:created選択解除時(未選択状態)
selection:updated別のオブジェクトを選択した時
mouse:upマウスボタンを離した時(ボタンは離した状態)
mouse:downマウスボタン押下時(押下操作完了時)
mouse:moveマウス移動時
mouse:up:beforemouse:upの前(ボタンは離されていない)
mouse:down:beforemouse:downの前(ボタン押下は完了していない)
mouse:move:beforemouse:moveの前(移動はしていない)
mouse:dblclickダブルクリック時
mouse:wheelマウスホイール回転時
mouse:overキャンバス、オブジェクトにマウスホバー時
mouse:outキャンバス、オブジェクト上からマウスが出た時
dropドラッグしているオブジェクトをドロップした時
dragoverキャンバス上にオブジェクトをドラッグしている時(ドラッグして保持したままだと発生し続ける)
dragenterドラッグしているオブジェクトがキャンバス上に入った瞬間(オブジェクトではなくマウスポインタがキャンバスに入った瞬間)
dragleaveドラッグしているオブジェクトがキャンバスの外に出た瞬間(オブジェクトではなくマウスポインタがキャンバス外に出た瞬間)
after:rendermouse:down、move、upの後

Fabric.jsの公式サイトのデモで、イベントの発生タイミングや発生時に取得可能な内容を確認することができる。

http://fabricjs.com/events

いくつかの操作例を挙げ、その際に発生するイベントの順番を説明していく。

各操作例での発生イベント

よく使いそうな、代表的(だと思う)操作を例として、イベントが発生する順番をまとめていく。

オブジェクト未選択→オブジェクト選択時に発生するイベント

マウスをクリックしてオブジェクトを選択した際に発生するイベント。

オブジェクト未選択→マウスクリック→オブジェクト選択

というような操作の流れ。

イベント名備考
mouse:down:before
selection:createdこの時点でオブジェクトは選択状態(canvas.getActiveObjects()で取得可能)
before:transform
mouse:down
after:render

オブジェクト選択→別オブジェクト選択時に発生するイベント

オブジェクトをすでに選択済みの状態で、別のオブジェクトを選択した際に発生するイベント。

オブジェクト選択→マウスクリック→別オブジェクト選択

というような操作の流れ。

イベント名備考
mouse:down:before
selection:updatedこの時点で別オブジェクトが選択された状態
before:transform
mouse:down
after:render

同じオブジェクトを選択する操作でも、直前にオブジェクトを選択しているか未選択かで発生するイベントが異なるので注意する。

オブジェクトの移動、回転、拡大縮小、絞り中に発生するイベント

オブジェクトを選択し、移動、回転、拡大・縮小、絞り等の操作を行っている最中に発生するイベント。

オブジェクト選択→オブジェクトを移動、回転、拡大、絞り等(マウスボタンは押下しっぱなし)

マウスボタン押下中に発生するイベントになる。(マウスボタンを離すと、操作完了時のイベントが発生する)

イベント名備考
mouse:move:before mouse:moveに対応するイベント。各操作イベントの発生前に発生。
object:moving 、
object:rotating、
object:scaling、
object:skewing
各操作に対応するイベントが発生
mouse:move 各操作時には、マウスの移動が伴うので、mouse:moveイベントも発生する。
after:render 

回転、拡大等のイベントはマウスボタンを押下して動かしている間、発生し続ける。

また、マウスの移動が伴うので、マウス移動のイベントも発生し続ける。

オブジェクトの操作完了時に発生するイベント

オブジェクトの移動や回転が完了した際に発生するイベント。

オブジェクト選択→オブジェクト操作→マウスボタンを離す

このような操作の流れで、マウスボタンを離したタイミングで発生する。

イベント名備考
mouse:up:beforemouse:upに対応するイベント。各操作完了イベントの発生前に発生。
object:movied、
object:rotated、
object:scaled、
object:skewed
各操作に対応するイベントが発生
object:modifiedオブジェクト修正時に発生
mouse:up
after:render

object:modified はmovedやscaledなど、個別の操作完了イベントの後に必ず発生する。

オブジェクトの移動や回転など、特定の操作完了を区別して処理したい場合は、object:moved 、 object:rotated、 object:scaled、 object:scaled 等を使う。

移動や回転等の操作完了をまとめて扱いたい場合は、 object:modifiedを使う。

オブジェクトの選択解除時に発生するイベント

選択状態のオブジェクトがある→キャンバス上のオブジェクト以外の部分をクリック→オブジェクトが未選択の状態になる

というような操作の流れの時に発生するイベント。

イベント名備考
mouse:down:before
before:selection:clearedこの時点では選択解除されていないため、getActiveObjectで取得可能。
selection:clearedこの時点で選択解除される
mouse:down
after:render

この後にマウスボタンを離した場合は、mouse:up:before、mouse:upとイベントが発生する。

なお、canvas.discardActiveObject()を実行した際も、オブジェクトの選択状態が解除されるため、 before:selection:cleared 、 selection:cleared が発生する。

注意点とまとめ

今回はマウスでの操作を中心にイベントの発生を見てきたが、オブジェクトの選択、選択解除、回転、拡大縮小等はsetActiveObject、discardActiveObject等や、rotate、scaleを変更することでも可能となる。

そして、JavaScriptからオブジェクトを操作した場合にも対応するイベントが発生するため、注意が必要。

細かくイベントのハンドリングが可能なので、うまく使えば使い勝手の良いキャンバスを作ることもできる。

良いキャンバスライフを送りましょう♪