Select All the objects on canvas using Fabric.js

Question

Is there a way to explicitly select all the objects present at a particular instance of time. This can be easily done using mouse to select all. Is there a code-solution like a button named Select All so that clicking it would make all the fabric type objects being selected and then I could apply the changes to whole of that ActiveGroup using canvas.getActiveGroup(); and iterate over.

score 38 · Accepted Answer · answered Dec 15 '13 at 12:14

38

Good question.

There's no built-in method for this, but you would need to do something along these lines:

var objs = canvas.getObjects().map(function(o) {
  return o.set('active', true);
});

var group = new fabric.Group(objs, {
  originX: 'center', 
  originY: 'center'
});

canvas._activeObject = null;

canvas.setActiveGroup(group.setCoords()).renderAll();

The code should be self-explanatory, and it's pretty much what's happening under the hood when you use mouse, shift+click, etc.

answered Dec 15 '13 at 12:14

kangax

38,898
13
99
135

3

Again a Perfect Working Solution. Thanks a lot @kangax ! – softvar Dec 15 '13 at 18:31
5

This code results in objects jumping position if a group already exists. It works if you call `canvas.deactivateAll();` before this code (and take out the line `canvas._activeObject = null;` because it's no longer needed). – miyasudokoro Oct 16 '14 at 21:01
Hi! Is there any way to override the Shift+Click to Ctrl+Click? – Miguel Ike Dec 19 '14 at 06:29
Solutions like this no longer work no that get/set activeGroup has been removed from fabric in favor of simply "activeObject". See Tom-Steve's answer below. – user883210 Jun 21 '18 at 00:04
I am using typescript and active is not part of the union type in object.set – Feb 19 '20 at 12:55

score 16 · Answer 2 · answered Jun 01 '18 at 11:10

Using the current version of fabric.js (2.3.1) you can do this:

canvas.discardActiveObject();
var sel = new fabric.ActiveSelection(canvas.getObjects(), {
  canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();

This is an quote from the demo page: http://fabricjs.com/manage-selection

score 1 · Answer 3 · edited Jul 12 '18 at 15:43

1

canvas.setActiveGroup it's no longer an option. It was erased as a function in version 2.0

edited Jul 12 '18 at 15:43

piman314

5,285
23
35

answered Dec 26 '17 at 15:48

Cenlan

113
5

score 0 · Answer 4 · answered Jul 29 '14 at 20:21

0

This is a more compact form:

canvas.setActiveGroup(new fabric.Group(canvas.getObjects())).renderAll();

answered Jul 29 '14 at 20:21

perfect_element

663
9
15

1

This makes my objects' positions jump. – miyasudokoro Oct 16 '14 at 20:56

score 0 · Answer 5 · answered Mar 06 '17 at 17:26

selectAllObjects() {
    this.canvas.discardActiveObject();
    this.canvas.discardActiveGroup();

    let objects: Fabric.Object[] = this.canvas.getObjects().map(function (object: Fabric.Object) {
        return object.set('active', true);
    });

    if (objects.length === 1) {
        this.canvas.setActiveObject(objects[0]);
    } else if (objects.length > 1) {
        let group: Fabric.Group = new Fabric.Group(objects.reverse(), {
            canvas: this.canvas
        } as any);
        group.addWithUpdate(null);
        this.canvas.setActiveGroup(group);
        group.saveCoords();
        this.canvas.trigger("selection:created", {
            target: group
        });
    }

    this.canvas.renderAll();
}

Select All the objects on canvas using Fabric.js

5 Answers5

Linked