FabricJS

【JavaScript】【Fabric.js】選択した矩形を削除する

  /

JavaScriptのキャンバスを操作するライブラリであるFabric.jsを使用して、矩形をマウスで選択して削除する。

Contents
  1. HTML
  2. キャンバスの設定
  3. 選択したオブジェクトを削除する

HTML

削除ボタンを押下したら削除する。

hmtl
<button type="button" id="deleteBtn" >削除</button>
<canvas id="canvas"></canvas>

 

キャンバスの設定

キャンバスを設定する。

/*
 * 画面ロード時に実行される関数
 */
function load(){
    canvas = new fabric.Canvas("canvas");

    //適当にキャンバスのサイズ設定
    canvas.setWidth(400);
    canvas.setHeight(400);
}

 

選択したオブジェクトを削除する

キャンバスに描画したオブジェクトを選択し、「削除」ボタンを押下するとオブジェクトを削除するようにする。

function deleteObj(){
    //選択されているオブジェクトを削除する。
    let activeObjects = canvas.getActiveObjects();

    if (activeObjects != null) {
        if (confirm('選択された箇所を全て削除しますか？')) {
            activeObjects.forEach(obj => {

                //対象オブジェクトを削除
                canvas.remove(obj);

                //矩形のIDとcanvas.item紐づけ用配列も削除する。
                let arrIndex = arrayRect.indexOf(obj.id);
                arrayRect.splice(arrIndex, 1);
            });
        }
    } else {
        alert("オブジェクトが選択されていません。");
    }
}

deleteBtn.addEventListener('click', deleteObj,false);

 

複数のオブジェクトを選択した場合、全てのオブジェクトが削除される。

オブジェクトにIDを付与してcanvas.itemのインデックスと紐づけていた場合、紐づけ用の配列からも、削除したオブジェクトの要素は削除しておく。

キャンバスのオブジェクトIDとcanvas.itemのインデックス紐づけは以下の記事を参照。

https://max999blog.com/how-to-set-fabricjs-objectid/

 

JavaScript Fabric.js
関連記事