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('canvas');
canvas.add(new fabric.Rect({
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  }));

 canvas.add(new fabric.Circle({
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
  }));

and I have two button while clicking the button named

select rectangle
select second object

While clicking the select rectangle button it should select the rectangle shape and while clicking the select second object button it should select the second object circle.

Here is the Jsfiddle for workaround.

I goggled and fed up, here I am seeking for some point how to start.

EDIT

I like to have the ID for each object, it should be possible to select the object using that ID, why I am asking this is, while using the collaborative things we can't tell surely all the connected nodes will have the item in same index, so unique id will be useful.

@kangax please help in this – Thirumalai murugan Nov 20 '13 at 13:37 — Thirumalai murugan, Nov 20 '13 at 13:37

score 89 · Answer 1 · answered Nov 20 '13 at 17:18

89

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/

answered Nov 20 '13 at 17:18

Dan Brown

1,515
1
9
13

2

Nice! can't we get the item number onclick and then pass that to `canvas.setActiveObject(canvas.item(itemNumber));` – softvar Nov 20 '13 at 19:55
1

Is there a way to get item number being selected(onclick) ? – softvar Nov 20 '13 at 19:56
@danbrown is there any way to set the id for the item because I like it do this collaborative.... so if your selecting by item position it would be different in each persons so if we can add some unique id and fetching it would be some what good. +1 for your valuable suggestion – Thirumalai murugan Nov 21 '13 at 04:34
I would probably add the items to the canvas using a function, that way you can set a global counter each time the add item function is called. At the same time, I would probably use a select box that adds a new – Dan Brown Nov 25 '13 at 10:23
This should be the answer – Max Hudson Jun 03 '16 at 01:52
6

For some reason, I had to call `canvas.renderAll();` afterwards – Rahil Wazir Apr 28 '20 at 15:36
`canvas.renderAll` needs to be called as a part of breaking change from `1.x` to `2.x`. It's referred on Github Issues: https://github.com/fabricjs/fabric.js/issues/4145#issuecomment-321385682 – Shivek Khurana Sep 25 '20 at 17:52

score 24 · Accepted Answer · edited Jun 28 '16 at 10:40

24

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

edited Jun 28 '16 at 10:40

jdrake

333
4
17

answered Nov 22 '13 at 03:25

John

2,003
2
20
30

thanks now I am able to add the id +1, can you tell me is it possible to select the object using that id? if yes please give me the example for that – Thirumalai murugan Nov 22 '13 at 06:38
In any case you have to traverse all the objects and check if the current object id == the id of the object you need ! Simple..if yes do some action.. – John Nov 22 '13 at 08:20
ya I think of that first but I feel that's not a good way if we are having the huge number of object is it? – Thirumalai murugan Nov 22 '13 at 08:34
yes of course but i think in javascript that is only way to retrieve the required object – John Nov 22 '13 at 08:56
4

Hi, I tried saving the JSON string of the object with the id. But I can't find the id value. The JSON string doesn't contain the id. Any solution? – Miguel Ike Dec 11 '14 at 17:58
2

@MiguelIke, better 3 years late than never . . . you need to pass in an array of extra properties to the `toJSON` function to make it include those properties in the JSON. For instance: `canvas.toJSON(["id"])` http://fabricjs.com/docs/fabric.Canvas.html#toJSON – John Washam Feb 21 '18 at 03:41

score 10 · Answer 3 · answered Apr 23 '15 at 15:19

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.

score 3 · Answer 4 · answered Apr 19 '19 at 15:56

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

How to select Fabric.js object programmatically

4 Answers4

Linked

Related