Adding IDs to Fabric.js elements

Question

I am creating a 'map like' application in Canvas using the Fabric.js library. I essentially put an image down and then lay circles on top of the image with the correct coordinates. The dot locations and names come through as JSON data received from an ajax call. I need a way to refer to any individual circle so that I can fetch more information regarding that circle (each circle has a popup with more detailed information).

I can't find anywhere in the documentation that explains how to do this, I have tried adding an ID to an object like this:

tokens.add(new fabric.Circle({ radius: 25, fill: '#f55', top: 100, left: 70, id: "foo" }));

with no luck retrieving it. Any help would be greatly appreciated. Also this is my first interaction with this community, so I apologize if my question isn't detailed enough, or if there is some other problem with it.

I answered a similar question here — http://stackoverflow.com/questions/11272772/fabricjs-how-to-save-canvas-on-server-with-custom-attributes — kangax, Jul 11 '12 at 15:33
Check this: https://github.com/kangax/fabric.js/wiki/Adding-additional-object-properties-to-serialized-JSON — ptCoder, Feb 26 '15 at 10:54

score 0 · Answer 1 · answered Jul 30 '15 at 09:26

0

You can add an attribute with fabric.object.prototype. So, add :

fabric.Object.prototype.uid = ... ;

answered Jul 30 '15 at 09:26

Othmane Charara

1

score 0 · Answer 2 · edited Feb 26 '21 at 07:58

You can Extend fabric.Object class and add your own Property But easiest way would be using fabric.util.Object.extend(). You can add as many as custom property you want and access it using object.toObject().id.

    extend(object, prop) {
        object.toObject = ((toObject) => {
            return function () {
                return fabric.util.object.extend(toObject.call(this), prop);
            };
        })(object.toObject);
    }

and then

    this.extend(line , {
            customType:'ArrowLine',
            id:this.randomId(),
            CommentId:activeObject.toObject().id, extensionId
    });

Adding IDs to Fabric.js elements

2 Answers2