Javascript 删除Fabric.js画布上的多个对象

正在努力从结构画布中删除多个对象。一切似乎都处于正常工作状态，但当代码运行时，它不会从画布中删除多个选定对象

    service.deleteSelectedObject = function () {
        var selectedObject = service.canvas.getActiveObject();
        var selectedMultipleObjects = service.canvas.getActiveGroup();
        var data = {};

        // get object id
        // get selected objects from canvas

        if (selectedObject) {
            data = {
                type: 'whiteboard::delete',
                id: selectedObject.id
            };

            delete service.objectMap[selectedObject.id];
            service.canvas.remove(selectedObject);
        } else {
            data = {
                type: 'whiteboard::delete',
                object: selectedMultipleObjects
            };
            console.log(selectedMultipleObjects);
            selectedMultipleObjects._objects.forEach(function (object, key) {
                console.log(object);
                service.canvas.remove(object);
            });
        }

        signalService.sendMessage(service.recipient, data);
    };

我应该指出，所有这些控制台日志都通过了它们应该通过的测试。正如else语句中出现的问题一样，这段代码的第一部分应该如何工作

---

如果你需要进一步的信息，请告诉我

活动组的对象确实在画布上，但如果它们在活动组中，则将其从画布中删除不会将其从渲染管道中删除

当fabricjs绘制所有内容时，它会检查画布上的对象以及是否存在activeGroup。如果存在activeGroup，则其对象将稍后渲染，而不管它们是否在画布上

因此，可以有效地从画布中删除对象，但在清除活动组的选择之前，对象仍然存在。 正确的步骤是从画布和activeGroup中删除对象

检查代码段，用鼠标选择所有对象，然后按“全部删除”按钮

var canvas=newfabric.canvas（'canvas'）；
var r1=new fabric.Rect（{宽度：50，高度：50}）；
var r2=new fabric.Rect（{宽度：50，高度：50，顶部：110，左侧：110}）；
var r3=new fabric.Rect（{宽度：50，高度：50，顶部：60，左侧：60}）；
canvas.add（r1、r2、r3）；
函数removeAll（）{
var o=canvas.getActiveGroup（）；
o、 \ u objects.forEach（函数（对象，键）{
画布。移除（对象）；
o、 removeWithUpdate（对象）；
});
canvas.adwardActiveGroup（）；
canvas.renderAll（）；
}

---

活动组的对象确实在画布上，但如果它们在活动组中，则从画布中删除它们不会将它们从渲染管道中删除

当fabricjs绘制所有内容时，它会检查画布上的对象以及是否存在activeGroup。如果存在activeGroup，则其对象将稍后渲染，而不管它们是否在画布上

因此，可以有效地从画布中删除对象，但在清除活动组的选择之前，对象仍然存在。 正确的步骤是从画布和activeGroup中删除对象

检查代码段，用鼠标选择所有对象，然后按“全部删除”按钮

var canvas=newfabric.canvas（'canvas'）；
var r1=new fabric.Rect（{宽度：50，高度：50}）；
var r2=new fabric.Rect（{宽度：50，高度：50，顶部：110，左侧：110}）；
var r3=new fabric.Rect（{宽度：50，高度：50，顶部：60，左侧：60}）；
canvas.add（r1、r2、r3）；
函数removeAll（）{
var o=canvas.getActiveGroup（）；
o、 \ u objects.forEach（函数（对象，键）{
画布。移除（对象）；
o、 removeWithUpdate（对象）；
});
canvas.adwardActiveGroup（）；
canvas.renderAll（）；
}

---

在fabric.js的第2版之后，没有

getActiveGroup

。要删除多个对象，需要使用

forEachObject

。此示例建立在上一个示例的基础上，可以删除单个对象或分组对象

var canvas=newfabric.canvas（'canvas'）；
var r1=new fabric.Rect（{宽度：50，高度：50}）；
var r2=new fabric.Rect（{宽度：50，高度：50，顶部：110，左侧：110}）；
var r3=new fabric.Rect（{宽度：50，高度：50，顶部：60，左侧：60}）；
canvas.add（r1、r2、r3）；
函数deleteObj（）{
var doomedObj=canvas.getActiveObject（）；
如果（doomedObj.type==='activeSelection'）{
//活动选择需要对画布的引用。
doomedObj.canvas=画布；
doomedObj.forEachObject（函数（obj））{
canvas.remove（obj）；
});
}//endif多个对象
否则{
//如果是单个对象，则将其删除
var activeObject=canvas.getActiveObject（）；
//如何删除多个对象？
//if（activeObject！==null&&activeObject.type==='rectangle'）{
if（activeObject！==null）{
canvas.remove（activeObject）；
}
}//否则就只有一个物体了
}//结束删除OBJ

---

在fabric.js的第2版之后，没有

getActiveGroup

。要删除多个对象，需要使用

forEachObject

。此示例基于上一个示例，可以删除单个对象或分组对象

var canvas=newfabric.canvas（'canvas'）；
var r1=new fabric.Rect（{宽度：50，高度：50}）；
var r2=new fabric.Rect（{宽度：50，高度：50，顶部：110，左侧：110}）；
var r3=new fabric.Rect（{宽度：50，高度：50，顶部：60，左侧：60}）；
canvas.add（r1、r2、r3）；
函数deleteObj（）{
var doomedObj=canvas.getActiveObject（）；
如果（doomedObj.type==='activeSelection'）{
//活动选择需要对画布的引用。
doomedObj.canvas=画布；
doomedObj.forEachObject（函数（obj））{
canvas.remove（obj）；
});
}//endif多个对象
否则{
//如果是单个对象，则将其删除
var activeObject=canvas.getActiveObject（）；
//如何删除多个对象？
//if（activeObject！==null&&activeObject.type==='rectangle'）{
if（activeObject！==null）{
canvas.remove（activeObject）；
}
}//否则就只有一个物体了
}//结束删除OBJ

代码段的预览似乎不再有效。代码段的预览似乎不再有效。