【JavaScript】【Fabric.js】グループ選択したオブジェクトの座標を取得する

1<!-- html -->
2<canvas class="imageCanvas" id="imageCanvas"></canvas>
3var canvas;
4
5/**
6 * 画面ロード時にオブジェクト描画とイベントリスナー登録
7 */
8function load(){
9    canvas = new fabric.Canvas('imageCanvas');    //キャンバス取得
10    canvas.isDrawingMode = false;    //フリー描画禁止
11
12    //オブジェクト描画
13    let rect = new fabric.Rect({
14        left: 10,
15        top: 10,
16        width: 50,
17        height: 30,
18        originX: 'left',
19        originY: 'top',
20    });
21    canvas.add(rect);
22    
23    //オブジェクトが選択された場合のイベントリスナー登録
24    canvas.on('selection:created', function(e) { getObjPosition(e); });
25    canvas.on('selection:updated', function(e) { getObjPosition(e); });
26
27    //オブジェクトが変更された場合のイベントリスナー登録
28    canvas.on('object:modified', function(e) { getObjPosition(e); });
29}
30
31window.addEventListener('DOMContentLoaded', load, false);

1/**
2 * オブジェクトの座標を取得する処理
3 */
4function getObjPosition(e) {
5    //選択されたオブジェクトの取得
6    let activeObjects = canvas.getActiveObjects();
7
8    //取得したオブジェクトが1個の場合のみ処理を行う
9    if ( (activeObjects) && (activeObjects.length == 1) ){
10        //左端のX座標
11        const x1 = activeObjects[0].left;
12        //上端のY座標
13        const y1 = activeObjects[0].top;
14
15        //右端のX座標
16        //オブジェクトの実際の幅はwidth × scaleXで計算する必要がある
17        const x2 = x1 + (activeObjects[0].width * activeObjects[0].scaleX);
18
19        //下端のY座標
20        //オブジェクトの実際の幅はwidth × scaleXで計算する必要がある
21        const y2 = y1 + (activeObjects[0].height * activeObjects[0].scaleY);
22    }
23}

1    //オブジェクト描画
2    let rect1 = new fabric.Rect({
3        left: 10,
4        top: 10,
5        width: 50,
6        height: 30,
7        originX: 'left',
8        originY: 'top',
9    });
10    canvas.add(rect1);
11
12    let rect2 = new fabric.Rect({
13        left: 10,
14        top: 100,
15        width: 50,
16        height: 30,
17        originX: 'left',
18        originY: 'top',
19    });
20    canvas.add(rect2);

1/**
2 * オブジェクトの座標を取得する処理
3 */
4function getObjPosition(e) {
5    //選択されたオブジェクトの取得
6    let activeObjects = canvas.getActiveObjects();
7
8    //取得したオブジェクトが2個以上の場合のみ処理を行う
9    if ( (activeObjects) && (activeObjects.length > 1) ){
10        //グループ情報の取得
11        const groupLeft = activeObjects[0].group.left;
12        const groupTop = activeObjects[0].group.top;
13        const groupWidth = activeObjects[0].group.width;
14        const groupHeight = activeObjects[0].group.height;
15        const groupScaleX = activeObjects[0].group.scaleX;
16        const groupScaleY = activeObjects[0].group.scaleY;
17
18        //中心点を計算
19        const groupCenterX = groupLeft + (groupWidth * groupScaleX / 2);
20        const groupCenterY = groupTop + (groupHeight * groupScaleX / 2);
21
22        //各オブジェクトの座標取得
23        activeObjects.forEach(obj => {
24            //左端のX座標
25            const objLeft = groupCenterX + (obj.left * groupScaleX);
26            //上端のY座標
27            const objTop = groupCenterY + (obj.top * groupScaleY);
28
29            //右端のX座標
30            const objRight = objLeft + (obj.width * groupScaleX * obj.scaleX);
31    
32            //下端のY座標
33            const objBottom = objTop + (obj.height * groupScaleY * obj.scaleY);
34        }
35    }
36}