fabric.js イベント処理のメモ書き

fabric.js イベント処理のメモ書き

# 概要

fabric.js は、canvas 上にいろいろな図形を描くのに便利なライブラリです。
fabric.js イベント処理についてまとめておきます。
確認バージョンは、version:"5.4.0" を利用。
ローカルでそのまま JavaScript で利用できる最終バージョン。
Fabric.js v6.x (現在開発中) 以降は、 ES6 に移行し、コールバックが Promise になるようです。

- [Fabric.js 公式](http://fabricjs.com/) 
- [github fablic.js](https://github.com/fabricjs/fabric.js)

## canvas と object (図形)

canvas と object にそれぞれイベント処理を記述できる。
canvas のイベント処理は、canvas に関するものとオブジェクトやグループをまとめて処理するときに利用か？

# canvas イベントの種類

「Fires:」に下記が乗っているが、「object:added」などもイベントが拾える。
よくわからない。

> [fablic.js Class: Canvas](http://fabricjs.com/docs/fabric.Canvas.html)

- 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:up: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

# オブジェクトイベントの種類

オブジェクト（図形）のイベント

[Class: Object](http://fabricjs.com/docs/fabric.Object.html)

- 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 () {});
```

![2024-09-28_11h55_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/7310d77a-db98-0c69-b183-e2b00fe7a33b.png)