Fabric.js: How to select multiple object programmatically?

[hardikradixweb]

I was trying to select multiple objects programmatically but I didn't found any way to do it. I have read all the documents & seen demos but I didn't found any method for doing this. Can you please help me out how can I achieve this with FabricjJs?

example code is:

var group = canvas.getActiveGroup();
canvas.deactivateAll().renderAll();
canvas.setActiveGroup(group);
canvas.renderAll();

[junedlanja]

fabric.js has no built-in method for this, but you can do it programmatically using this code

`var objs = canvas.getObjects().map(function(o) {
return o.set('active', true); //return objects that you want to select
});

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

canvas._activeObject = null;
group.setCoords();
canvas.setActiveGroup(group).renderAll();`

[akumetsuv]

I've tried this method and it works, but when you zoom or pan the canvas the outer selection box and the controls remain centered on the screen with the original size they were created. Any idea on how to make the outer bounding box and the controls respond to the panning and zooming events? The individual bounding boxes of the group's elements are working fine.

http://i.imgur.com/kIImGr3.gif

Grouping:

if(objects == null || objects.length < 1)
    return;
this.canvas.deactivateAllWithDispatch();
if(objects.length == 1) {
    this.canvas.setActiveObject(objects[0]);
}
else {
    var objs = objects.map(function(o) {
        return o.set('active', true); 
    });
    this.selectedGroup = new fabric.Group(objs, {
            originX: 'center', 
            originY: 'center'
    });
    this.canvas.setActiveGroup(this.selectedGroup.setCoords()).renderAll();
}

Zooming:

zoomIn() {
    if(this.canvas.getZoom() > 15)
        return;
    this.canvas.zoomToPoint(new fabric.Point(this.canvas.width / 2, this.canvas.height / 2), this.canvas.getZoom() * 1.1);

} 
zoomOut() {
    if(this.canvas.getZoom() < 0.3)
        return;
    this.canvas.zoomToPoint(new fabric.Point(this.canvas.width / 2, this.canvas.height / 2), this.canvas.getZoom() / 1.1);
} 

[samael205]

Hi @akumetsuv: Your problem refers to a bug fabricjs when calculating coordinates in groups, in future versions this will be fixed.

[akumetsuv]

Ok, thanks. Any idea on the time frame for this fix or where to look to try and do it myself?

[samael205]

Nope, The fix can be released on the 1.7.8 version... i think... but, i dont know sure.

[Ghamgle]

I'm working with fabricjs and I need this fix as soon as posible.

So... very thanks

[asturur]

there is a branch in the open PR list that put some fixes for that. next 10 days i have some free time so i guess i will release the current fixes as 1.6.7 and i ll do a release 1.7.0 with 2 big features that are object caching and this coordinates changes.

[blobinabottle]

Hi
Any update on this ? Is there a workaround ?

Thanks

[milanhlinak]

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();
}

[yjose]

Any update on this @samael205
thanks

[samael205]

@asturur This is solved?

[yjose]

the above example does not work for me :)
but this is work perfect
````
const items = canvas.getObjects();
const group = new fabric.Group();
group.canvas = canvas;
items.forEach((object) => {
group.addWithUpdate(object);
// canvas.setActiveObject(object);
//dispatch({ type: 'OBJECT_ADDED', object });
});
canvas.setActiveGroup(group.setCoords()).renderAll();
``````

[kadirilkimen]

Hello. I had a trouble with same thing and i think Fabricjs already has multiple ways to do it. Here is my simplest solution.

var selection = new fabric.ActiveSelection( canvas.getObjects(), {canvas: canvas } );
canvas.setActiveObject(selection);
canvas.renderAll();

So we can create an ActiveSelection object and can set it as activeobject.

In my case, i have a lot of objects in the canvas those shouldn't be selected. I am keeping a list of selectable objects and here is my code to solve this :

var selection = new fabric.ActiveSelection(design.objects, {canvas: canvas, });
canvas.setActiveObject(selection);
canvas.requestRenderAll();

[asturur]

郑俊鑫 :

check here: http://fabricjs.com/manage-selection