21

I'm actually working on a html5 canvas project which uses the fabric.js Framework for the canvas interactions. Now I'm struggeling with the deletion of multiple objects. The following code does not seem to track the selected objects, but tracks all objects on the canvas.

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function(){
    var curSelectedObjects = new Array();
    curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);
    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++){
        canvas.setActiveObject(curSelectedObjects[i]);
        canvas.remove(canvas.getActiveObject());
    }
};

Don't get my failure.

4

6 に答える 6

37

ほとんどの問題を解決した@Kangaxコメントにより、現在選択されているオブジェクトをキャンバスから削除するための次の解決策を見つけました。

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
if(canvas.getActiveGroup()){
      canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) });
      canvas.discardActiveGroup().renderAll();
    } else {
      canvas.remove(canvas.getActiveObject());
    }
};

この関数は、グループが選択されているかどうかを確認します。グループを選択すると、グループのすべてのオブジェクトが削除されます。グループが選択されていない場合、関数は選択されたオブジェクトを削除しようとします。何も選択されていない場合、キャンバスは変更されません。

于 2012-08-07T11:11:29.710 に答える
5

コードは、オブジェクトを選択してから選択解除しているように見えます。

これはうまくいくかもしれません：

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
    var curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);

    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++)
    {
        canvas.remove(curSelectedObjects[i]);
    }
};

良い情報リンク：

https://github.com/kangax/fabric.js/wiki/Tutorial-2#wiki-modifying-objects

于 2012-08-06T14:49:12.083 に答える
3

任意のオブジェクトプロパティを確認し、削除することができます

var objects = canvas.getObjects();

for (var i = 0; i < objects.length; ) {
  if (objects[i].name == 'cropArea' || objects[i].name == 'bleedLine') {
    canvas.remove(objects[i]);
    i = 0;
  } else {
    i++;
  }
}
于 2016-10-06T09:25:46.780 に答える
0

私はこれをしました：

  var selectedObj = canvas.getObjects(canvas.getActiveGroup())

選択したオブジェクトの配列を返します。:)最後の関数paranthesisがコードスニペットにありません

于 2015-06-06T16:35:34.110 に答える
0

jsfiddleで見つけたこの1つのソリューションを除いて、上記のソリューション（またはstackoverflowのその他のソリューション）はどれも機能しませんでした：

function deleteObjects(){
var activeObject = canvas.getActiveObject(),
activeGroup = canvas.getActiveGroup();
if (activeObject) {
    if (confirm('Are you sure?')) {
        canvas.remove(activeObject);
    }
}
else if (activeGroup) {
    if (confirm('Are you sure?')) {
        var objectsInGroup = activeGroup.getObjects();
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function(object) {
        canvas.remove(object);
        });
    }
}
}

http://jsfiddle.net/beewayne/z0qn35Lo/

于 2016-12-22T15:43:29.913 に答える
0

canvas.removeが複数のパラメーターを取ることができることをご存知ですか？したがって、最も簡単な方法は次のとおりです。

canvas.remove(...canvas.getObjects());

これ以外canvas.clearでは、キャンバス内のオブジェクトのみが削除され、背景も削除されません。

于 2020-01-15T16:11:45.643 に答える