How to select Fabric.js object programmatically
To find the fabric object number (item number) of the selected object use:
canvas.on({
'object:selected': selectedObject
});
function selectedObject(e) {
var id = canvas.getObjects().indexOf(e.target);
}
var id
is the same number if you programmatically set the object as in Dan Brown's reply:
canvas.setActiveObject(canvas.item(id)); //id = 0, 1, 2 etc.
Yes, you can set id for each item by adding the below code in all.js
In the fabric.js build version 1.3.0 : In the Object declaration add
var object = {
id: this.id,
remaining properties in all.js
}
Now you can set the object id with:
canvas.getActiveObject().id=your id value;
You can retrieve the object id with :
Myid= canvas.getActiveObject().get('id');
add an id to your objects.
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({
id: 123,
left: 100,
top: 100,
width: 75,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 3,
padding: 10
}));
canvas.add(new fabric.Circle({
id: 456,
left: 200,
top: 200,
radius: 30,
fill: 'gray',
stroke: 'black',
strokeWidth: 3
}));
function removeSpot(canvas, id) {
canvas.forEachObject(function(obj) {
if (obj.id && obj.id === id) canvas.remove(obj);
});
}
// remove rect
removeSpot(canvas, 123);
// remove circle
removeSpot(canvas, 456);
You want to use:
canvas.setActiveObject(canvas.item(0));
In the buttons click event
The number corresponds to the order in which the object was added to the canvas.
See here:
http://jsfiddle.net/ThzXM/1/