web-dev-qa-db-ja.com

ユーザーに選択したファブリックjsオブジェクトを削除させます

単純なファブリックjsベースのアプリケーションがあり、ユーザーが図形を追加してそれらを接続し、アニメーション化できるようにします。

以下は私のJSです

var canvas; 
window.newAnimation = function(){
   canvas = new fabric.Canvas('canvas');
}

window.addRect = function(){
    var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
});
    canvas.add(rect);

}

window.addCircle = function(){
    var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
    canvas.add(circle);
}

これは私の Fiddle です。新しいアニメーションをクリックして、今すぐオブジェクトを追加できます。

ユーザーにオブジェクトを選択してもらい、それを削除できるようにする方法がわかりません。私はこれを見つけました html5のfabric.jsキャンバスで複数のオブジェクトを一度に削除 しかし、私はそれを正常に実装することができませんでした。基本的に、ユーザーがオブジェクトを選択して削除できるようにします。

javascripthtml5canvasfabricjs
24
user5049061

たとえば、remove（）メソッドを使用できます。

window.deleteObject = function() {
        canvas.getActiveObject().remove();
}

jsfiddle

31
Ian

Fabric.jsの新しいバージョンがリリースされたので、次を使用する必要があります。

canvas.remove(canvas.getActiveObject());
45
Alex Andre

選択したすべてのオブジェクトを削除します。

canvas.getActiveObjects().forEach((obj) => {
  canvas.remove(obj)
});
canvas.discardActiveObject().renderAll()
5
cby016

Fabric JS 2.3.6を使用しています。

ユーザーがキャンバス上の1つ以上のオブジェクトを選択し、削除ボタンをクリックしてそれらを削除できるようにしたかったのです。

古いバージョンからメソッドを削除

ActiveSelectionの導入以降、次のメソッドは使用できなくなりました。

setActiveGroup(group);
getActiveGroup();
deactivateAll();
discardActiveGroup();
deactivateAllWithDispatch();

これは私にとってうまく機能する私のコードであり、うまくいけばあなたもそうです。

$('html').keyup(function(e){
        if(e.keyCode == 46) {
            deleteSelectedObjectsFromCanvas();
        }
});    

function deleteSelectedObjectsFromCanvas(){
    var selection = canvas.getActiveObject();
    if (selection.type === 'activeSelection') {
        selection.forEachObject(function(element) {
            console.log(element);
            canvas.remove(element);
        });
    }
    else{
        canvas.remove(selection);
    }
    canvas.discardActiveObject();
    canvas.requestRenderAll();
}
3
Larry Robertson

バックスペースキーを使用してアクティブなオブジェクトを削除できます

$(document).keydown(function(event){
    if (event.which == 8) {
        if (canvas.getActiveObject()) {
            canvas.getActiveObject().remove();
        }
    }
});
0
Soubhagya Kumar