javascript - Removing multiple objects on Fabric.js canvas - Stack Overflow

admin管理员组

文章数量:1330917

Struggling to remove multiple objects from the fabric canvas. Everything seems to be in working order but when the code runs it does not remove the multiple selected objects from the 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);
    };

I should point out that all of these console logs do pass what they should. As well as the problem is occuring in the else statement the first part of this code works how it should

please let me know if you need any further information.

Struggling to remove multiple objects from the fabric canvas. Everything seems to be in working order but when the code runs it does not remove the multiple selected objects from the 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);
    };

I should point out that all of these console logs do pass what they should. As well as the problem is occuring in the else statement the first part of this code works how it should

please let me know if you need any further information.

• javascript
• canvas
• fabricjs

Share Follow asked Jan 14, 2016 at 17:33 Max LynnMax Lynn 1,77866 gold badges2525 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Object of active group are indeed on the canvas but removing them from canvas will not remove them from the rendering pipeline if they are in active group.

When fabricjs draws everything, it checks for object on canvas and presence of activeGroup. If activeGroup is present, its objects get rendered later, regardless they are on canvas or not.

So you are effectively removing the objects from the canvas, but untill you clear the selection of the active group, the objects are still there. Correct procedure is removing the object from the canvas and from the activeGroup.

check the snippet, select all objects with mouse and the press remove all button.

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./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>

After version 2 of fabric.js, there is no getActiveGroup. To delete multiple objects, you need to use forEachObject. This example builds on the previous one and can delete single objects or grouped objects.

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./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>

本文标签： javascriptRemoving multiple objects on Fabricjs canvasStack Overflow