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

Question

努力从织物画布上移除多个对象。一切似乎都正常，但是当代码运行时，它不会从画布中删除多个选定的对象。

    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 语句中出现的问题之外，此代码的第一部分应该如何工作

如果您需要任何进一步的信息，请告诉我。

Answer 1

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

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

因此，您实际上是从画布中删除了对象，但在您清除活动组的选择之前，对象仍然存在。 正确的过程是从画布和 activeGroup 中删除对象。

检查sn-p，用鼠标选择所有对象并按下删除所有按钮。

var canvas = new fabric.Canvas('canvas');
var r1 = new fabric.Rect({width:50,height:50});
var r2 = new fabric.Rect({width:50,height:50,top:110, left:110});
var r3 = new fabric.Rect({width:50,height:50,top:60, left:60});
canvas.add(r1,r2,r3);

function removeAll() {
var o = canvas.getActiveGroup();
o._objects.forEach(function (object, key) {
canvas.remove(object);
o.removeWithUpdate(object);
});
canvas.discardActiveGroup();
canvas.renderAll();
}

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js" ></script>
<input type="button" onClick="removeAll()" value="remove"/>
        <canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>

Answer 2

fabric.js 版本 2 之后，没有getActiveGroup。要删除多个对象，您需要使用forEachObject。此示例建立在上一个示例的基础上，可以删除单个对象或分组对象。

var canvas = new fabric.Canvas('canvas');
var r1 = new fabric.Rect({width:50,height:50});
var r2 = new fabric.Rect({width:50,height:50,top:110, left:110});
var r3 = new fabric.Rect({width:50,height:50,top:60, left:60});
canvas.add(r1,r2,r3);

function deleteObj(){
var doomedObj = canvas.getActiveObject();
  if (doomedObj.type === 'activeSelection') {
			// active selection needs a reference to the canvas.
			doomedObj.canvas = canvas;
			doomedObj.forEachObject(function(obj) {
      canvas.remove(obj);
			});
 }//endif multiple objects
  else{
  //If single object, then delete it
  var activeObject = canvas.getActiveObject();
    //How to delete multiple objects?
		//if(activeObject !== null && activeObject.type === 'rectangle') {
    if(activeObject !== null ) {
			canvas.remove(activeObject);
		}
  }//end else there's a single object
}//end deleteObj

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js" ></script>
<input type="button" onClick="deleteObj()" value="remove"/>
        <canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>