Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Delete multiple Objects at once on a fabric.js canvas in html5

I'm actually working on a html5 canvas project which uses the fabric.js Framework for the canvas interactions. Now I'm struggeling with the deletion of multiple objects. The following code does not seem to track the selected objects, but tracks all objects on the canvas.

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function(){
    var curSelectedObjects = new Array();
    curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);
    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++){
        canvas.setActiveObject(curSelectedObjects[i]);
        canvas.remove(canvas.getActiveObject());
    }
};

Don't get my failure.

like image 920
John Mayer Avatar asked Aug 06 '12 13:08

John Mayer


People also ask

How do I delete selected items in the canvas?

First, if an item is selected in the canvas, enable the Delete button. If no items are selected in the canvas, disable the Delete button. If the user clicks the Delete key, delete the selected objects.

How do I delete multiple objects from a group in fabric?

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.

What happens if I disable the “add multiple objects to canvas” option?

Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once since the renders are quequed and executed one per frame.

How do I react to selected items in the canvas?

Here's the scenarios we want to react to: First, if an item is selected in the canvas, enable the Delete button. If no items are selected in the canvas, disable the Delete button. If the user clicks the Delete key, delete the selected objects.


3 Answers

Due to @Kangax comment which solved most of the problem, I found the following solution to delete the currently selected objects from the canvas.

var deleteSelectedObject = document.getElementById('delete-item'); deleteSelectedObject.onclick = function() { if(canvas.getActiveGroup()){       canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) });       canvas.discardActiveGroup().renderAll();     } else {       canvas.remove(canvas.getActiveObject());     } }; 

The function checks whether a group is selected. If a group is selected every object of the group gets removed. If no group is selected the function tries to remove a selected object. If nothing is selected, the canvas is not changed.

like image 59
John Mayer Avatar answered Sep 29 '22 20:09

John Mayer


Your code seems like it is selecting and then de-selecting the objects.

This may work better:

var deleteSelectedObject = document.getElementById('delete-item'); deleteSelectedObject.onclick = function() {     var curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);      canvas.discardActiveGroup();     for (var i = 0; i < curSelectedObjects.length; i++)     {         canvas.remove(curSelectedObjects[i]);     } }; 

Good information link:

https://github.com/kangax/fabric.js/wiki/Tutorial-2#wiki-modifying-objects

like image 27
Alex W Avatar answered Sep 29 '22 20:09

Alex W


You can check any object property and can remove

var objects = canvas.getObjects();

for (var i = 0; i < objects.length; ) {
  if (objects[i].name == 'cropArea' || objects[i].name == 'bleedLine') {
    canvas.remove(objects[i]);
    i = 0;
  } else {
    i++;
  }
}
like image 22
Amit Gaur Avatar answered Sep 29 '22 19:09

Amit Gaur