CODEWITHSUNDEEP
fabricjs
effe
effe

Reputation: 1365

Creating and selecting a group programmatically with Fabric.js

Let's say I have a canvas containing 6 objects and a button outside of canvas.

When I click this button, 3 of this objects will to become a group and selected, objects will keep their positions relative to canvas.

Is that possible?

I tried so many things but could manage it to work. The solution that I'm looking for is something like below.

var objectList=[1,2,3];    
var newgroup = new fabric.Group();

$.each(objectList, function (i) {
    var obj = canvas.item(i);
    newgroup.add(obj.clone());
    canvas.remove(obj);
});

canvas.add(newgroup)
canvas.setActiveGroup(newgroup);
canvas.renderAll();

Upvotes: 5

Views: 15335

Answers (3)

Nico
Nico

Reputation: 81

Adding the selected items as group produced weird results when redrawing connections to them afterwards for me. fabic's ActiveSelection is the intended Group Object for programatically adding a Selection Group to Canvas now (probably didn't exist in 2013)

Here's my snipped that also works with following move events, it's selecting items based on two attributes 'issueType' and 'clusterIndex':

let allObjects = CANVAS.getObjects();
let selectedObjects = [];
for(let i=0;i < allObjects.length;i++){
    let object = allObjects[i];
    if(object.issueType && object.clusterIndex === clusterIndex){
        selectedObjects.push(object);
        }
    }
let selectionGroup = new fabric.ActiveSelection(selectedObjects);
CANVAS.add(selectionGroup);
CANVAS.setActiveObject(selectionGroup);

Upvotes: 1

user3713973
user3713973

Reputation: 19

var objectList = [1,2,3],
group = new fabric.Group(objectList);

the above code should would work for you it will anyway group objects 1,2,3

all you have to do is to get rid of the original objects and group the clones

Upvotes: 0

Kienz
Kienz

Reputation: 3507

You can use something like that:

(function() {
  var objectList = [1,2,3],
      group = new fabric.Group();

  canvas.forEachObject(function(o, i) {
    if (objectList.indexOf(i) > -1) {
      group.addWithUpdate(o);
      canvas.remove(o);
    }
  });
  canvas.setActiveObject(group);
  canvas.add(group);
})();

Only the objects at index 1, 2 or 3 are added to group.

Upvotes: 9

Related Questions