Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
149
rated 0 times [  150] [ 1]  / answers: 1 / hits: 63900  / 11 Years ago, wed, november 20, 2013, 12:00:00

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




  1. select rectangle

  2. 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.


More From » canvas

 Answers
3

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

[#74168] Tuesday, November 19, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
frederickmohamedw

Total Points: 21
Total Questions: 123
Total Answers: 105

Location: The Bahamas
Member since Tue, Apr 27, 2021
3 Years ago
frederickmohamedw questions
Wed, Sep 23, 20, 00:00, 4 Years ago
Sat, Jul 18, 20, 00:00, 4 Years ago
Sun, Apr 26, 20, 00:00, 4 Years ago
Sat, Jan 11, 20, 00:00, 4 Years ago
Fri, Dec 27, 19, 00:00, 4 Years ago
;