删除 Fabric.js canvas 上的多个对象

Question

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

    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

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

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

所以您实际上是从 canvas 中删除了对象，但是直到您清除活动组的 selection 之前，对象仍然存在。正确的步骤是从 canvas 和 activeGroup 中删除对象。

检查代码段，select 使用鼠标并按下删除所有按钮的所有对象。

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>

删除 Fabric.js canvas 上的多个对象

Removing multiple objects on Fabric.js canvas

javascript

canvas

fabricjs