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

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

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

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

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

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

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

http://fabricjs.com/events

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意点とまとめ

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

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

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

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

MAX

ITエンジニア、データサイエンティスト

TwitterContact

新卒でSIerに入社し、フリーランスになってWEB系へ転向。
その後AIの世界へ足を踏み入れ、正社員に戻る。 テーブルデータの分析がメイン。