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中删除对象。

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

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版之后，没有[Required(ErrorMessage = "Id is required")] [Range(100, int.MaxValue, ErrorMessage = "Invalid Id")] [DataMember(Name = "Id")] public int Id { get; set; }。要删除多个对象，您需要使用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

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

2 个答案: