fabric.js イベント処理のメモ書き
概要
fabric.js は、canvas 上にいろいろな図形を描くのに便利なライブラリです。
fabric.js イベント処理についてまとめておきます。
確認バージョンは、version:"5.4.0" を利用。
ローカルでそのまま JavaScript で利用できる最終バージョン。
Fabric.js v6.x (現在開発中) 以降は、 ES6 に移行し、コールバックが Promise になるようです。
canvas と object (図形)
canvas と object にそれぞれイベント処理を記述できる。
canvas のイベント処理は、canvas に関するものとオブジェクトやグループをまとめて処理するときに利用か？
canvas イベントの種類
「Fires:」に下記が乗っているが、「object:added」などもイベントが拾える。
よくわからない。
- object:modified at the end of a transform or any change when statefull is true
- object:rotating while an object is being rotated from the control
- object:scaling while an object is being scaled by controls
- object:moving while an object is being dragged
- object:skewing while an object is being skewed from the controls
- before:transform before a transform is is started
- before:selection:cleared
- selection:cleared
- selection:updated
- selection:created
- path:created after a drawing operation ends and the path is added
- mouse:down
- mouse:move
- mouse:up
- mouse:down:before on mouse down,event: before the inner fabric logic runs
- mouse:move:before on mouse move,event: before the inner fabric logic runs
- mouse
before on mouse up,event: before the inner fabric logic runs - mouse:over
- mouse:out
- mouse:dblclick whenever a native dbl click event fires on the canvas.
- event:dragover
- event:dragenter
- event:dragleave
- drop:before before drop event. same native event.event: This is added to handle edge cases
- event:drop
- after:render at the end of the render process,event: receives the context in the callback
- before:render at start the render process,event: receives the context in the callback
オブジェクトイベントの種類
オブジェクト（図形）のイベント
- event:added
- event:removed
- event:selected
- event:deselected
- event:modified
- event:modified
- event:moved
- event:scaled
- event:rotated
- event:skewed
- event:rotating
- event:scaling
- event:moving
- event:skewing
- event:mousedown
- event:mouseup
- event:mouseover
- event:mouseout
- event:mousewheel
- event:mousedblclick
- event:dragover
- event:dragenter
- event:dragleave
- event:drop
イベント処理の書き方
イベント毎に個々に定義
canvas 上のオブジェクト（図形）が選択された時のイベント例
同じイベントを２回登録すると、登録した順番に実行される。
canvas.getActiveObjects()は、選択されたオブジェクトを取得
canvas.getObjects()は、canvas 上の全オブジェクトを取得
.js
canvas.on('selection:created', function(evt) {
console.log('図形が選択されました:', canvas.getActiveObjects(), canvas.getObjects(), evt);
});
canvas.on('selection:created', function(evt) {
console.log('図形が選択されました2:', canvas.getActiveObjects(), canvas.getObjects(), evt);
});
一つの図形を選択した例
.log
図形が選択されました: [i] (2) [i, i] {e: undefined, selected: Array(1)}
図形が選択されました2: [i] (2) [i, i] {e: undefined, selected: Array(1)}
まとめてイベント処理を定義
まとめてイベント処理を定義するほうが、どんなイベント処理を行うかわかりやすい。
.js
canvas.on({
'selection:created': onSelectionCreated,
'selection:cleared': onSelectionCreared,
});
function onSelectionCreated(evt) {}
function onSelectionCreared(evt) {}
個別登録とまとめて登録の混合も可能
登録した順に、イベント処理が実行されます。
わけが分からなくなるので、どちらかにした方がいいと思う。
.js
canvas.on('selection:created', function(evt) {
console.log('図形が選択されました:', canvas.getActiveObjects(), canvas.getObjects(), evt);
});
canvas.on({
'selection:created': onSelectionCreated,
'selection:cleared': onSelectionCreared,
});
function onSelectionCreated(evt) {}
function onSelectionCreared(evt) {}
オブジェクトのイベント処理例
- 作成したテキスト図形に changed イベント処理を登録
.js
textObj.on('changed', function () {});
- changed イベント処理の削除と登録
テキストと長方形をグループにすると、グループ内のテキスト編集が出来なかった。
試行錯誤しながら、テキスト編集時はにグループ解除などの制御をして、イベント処理の削除・登録を行った。
.js
textObj.off('changed');
textObj.on('changed', function () {});
