How to select Fabric.js object programmatically

Question

I want to programmatically select Fabrics.js object. What do I have to do? For example, I am adding two objects like this:

var canvas = new fabric.Canvas(\'c         


        

Answer 1

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');

Answer 2

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.

Answer 3

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/

Answer 4

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