JavaScriptのキャンバスを操作するライブラリであるFabric.jsを使用して、矩形をマウスで選択して削除する。
スポンサーリンク
Contents
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/
スポンサーリンク
スポンサーリンク