【JavaScript】Fabric.jsで矩形にオブジェクトIDをつける

1html 
2<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js"></script> 
3<!-- canvasを設定 --> 
4<canvas class="imageCanvas" id="imageCanvas"></canvas>

1/*  * グローバル変数の宣言  */
2var canvas;
3
4//矩形オブジェクトに付与するIDのカウンター 
5var cnt;
6//描画処理用のフラグと座標
7var startFlg;
8var startX;
9var startY;
10var endX;
11var endY;
12//矩形のIDとインデックス対応付け用配列
13var arrayRect = [];
14const OBJ_NAME = "objNo";
15
16/*  * 画面ロード時に実行される処理  */
17function load() {
18    canvas = new fabric.Canvas('imageCanvas');
19    //キャンバスサイズの設定
20    canvas.setWidth(800);
21    canvas.setHeight(800);
22    //フリー描画禁止
23    canvas.isDrawingMode = false;
24    //矩形オブジェクトを一意に識別するためのカウンタ
25    cnt = 0;
26    //描画操作の開始確認用フラグと座標の初期化
27    startFlg = false;
28    startX = 0;
29    startY = 0;
30    endX = 0;
31    endY = 0;
32    //canvas関連のイベントリスナー登録
33    canvas.on('mouse:down', function(e) { mousedown(e);});
34    canvas.on('mouse:move', function (e) {mousemove(e);});
35    canvas.on('mouse:up', function (e) {mouseup(e);});
36}
37window.addEventListener('DOMContentLoaded', load, false);
38
39function countUpCnt() {
40    //cntを1増やす
41    cnt = cnt + 1;
42}

1/*
2 * Mousedown
3 * キャンバス内でマウスボタンを押下した際の処理
4 */
5function mousedown(e) {
6    //描画処理を開始する。
7    //マウスのポインター情報を取得
8    let mouse = canvas.getPointer(e.e);
9
10    //描画開始フラグをtrueに設定
11    startFlg = true;
12
13    //マウスの座標を開始座標に設定
14    startX = mouse.x;
15    startY = mouse.y;
16}

1/*
2 * Mousemove
3 * キャンバス内でマウスボタンを押下しながらマウスを移動させている場合の処理
4 */
5function mousemove(e) {
6
7    //startFlgがfalseの場合、描画処理は行わない
8    if(!startFlg) {
9        return false;
10    }
11}

1/*
2 * Mouseup
3 * キャンバス内でマウスボタンを押下した状態から離した場合の処理
4 */
5function mouseup(e) {
6
7    //描画処理が開始されている場合は長方形を描画する。
8    if(startFlg) {
9        //マウスボタンを離した座標を取得
10        let mouse = canvas.getPointer(e.e);
11
12        //矩形（長方形）描画
13        let obj = new fabric.Rect({
14            id: OBJ_NAME + cnt,        //ここでidを設定する
15            left: startX,
16            top: startY,
17            width: mouse.x - startX,
18            height: mouse.y - startY,
19            //塗りつぶしや枠線、選択可否の設定
20            fill: '',
21            stroke: 'blue',
22            strokeWidth: 2,
23            selectable: false
24        });
25
26        canvas.add(obj);
27
28        //オブジェクトIDを配列に保存しておく
29        arrayRect.push(OBJ_NAME + cnt);
30
31        canvas.renderAll();
32        canvas.calcOffset();
33        console.log("ID:" + obj.id + " 開始X:" + startX + " 開始Y:" + startY +
34                " 終了X:" + mouse.x + " 終了Y:" + mouse.y);
35        console.log(arrayRect);
36
37        //IDカウンターをインクリメント
38        countUpCnt();
39        //描画開始フラグをFalseに戻す
40        startFlg = false;
41    }
42}

1    //オブジェクトIDの設定
2    const objId = "objNo3"
3
4    //オブジェクトIDから対象の矩形オブジェクトを取得
5    let targetRect = canvas.item(arrayRect.indexOf(objId));
6
7    targetRect.set({stroke: 'blue'});