Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select All the objects on canvas using Fabric.js

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.

like image 948
softvar Avatar asked Dec 15 '13 09:12

softvar


3 Answers

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.

like image 105
kangax Avatar answered Oct 19 '22 15:10

kangax


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

like image 40
Tom-Steve Watzke Avatar answered Oct 19 '22 15:10

Tom-Steve Watzke


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

like image 1
Cenlan Avatar answered Oct 19 '22 15:10

Cenlan