在html5中的fabric.js画布上一次性删除多个对象

Question

我正在开发一个使用fabric.js框架进行canvas交互的html5 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());
    }
};

不要把我的失败归咎于你。

- John Mayer

---

只是一句附言：不要使用 var curSelectedObjects = new Array(); 的写法，而是用 []。特别是在这种情况下，你处理的不是数组，而是一个节点列表（!== 不是同一种东西）。 - Elias Van Ootegem

你是否正在尝试删除所选的一组对象？ - kangax

@kangax 是的，那正是我想做的。有什么建议吗？ - John Mayer

canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) }); canvas.discardActiveGroup().renderAll(); - kangax

Answer 1

由于@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());
    }
};

该函数检查是否选择了一个组。如果选择了一个组，则删除该组中的每个对象。如果没有选择任何组，则尝试移除所选对象。如果没有选择任何东西，则画布不会更改。

- John Mayer

---

由于某些原因，你的解决方案没有起作用，但这个可以：http://jsfiddle.net/beewayne/z0qn35Lo/。 - Hooman Askari

Answer 2

您的代码似乎在选择对象，然后又取消选择。

这样可能会更好：

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

这是关于it技术的相关信息。

- Alex W

Answer 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++;
  }
}

- Amit Gaur

Answer 4

我完成了这个：

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

返回选定对象数组。:) 你的代码片段中缺少最后一个函数括号。

- Ajit kohir

Answer 5

你知道canvas.remove可以接受多个参数吗？所以最简单的方法应该是这样的：

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

除了canvas.clear之外，这只会移除画布中的对象，而不会移除背景。

- TAB

Answer 6

除了我在jsfiddle上找到的这个解决方案之外，上面（或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/

- Hooman Askari