carstenschaefer / DrawerJs

A customizable WYSIWYG HTML canvas editor.
https://www.drawerjs.com
MIT License
556 stars 113 forks source link

How to add Custom property to objects like object Name or Object ID #69

Open Mayil-sam opened 2 years ago

Mayil-sam commented 2 years ago

How to add a custom property to an object (circle, triangle, rectangle) for Identification purposes. I have referred some code but that are not working can you someone help with this,

sample code

var rect = new fabric.Rect();

rect.toObject = (function(toObject) { return function() { return fabric.util.object.extend(toObject.call(this), { name: this.name }); }; })(rect.toObject);

canvas.add(rect);

rect.name = 'trololo';

console.log(JSON.stringify(canvas));

Output like this

'{"objects":[{"type":"rect","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0,"name":"trololo"}],"background":"rgba(0, 0, 0, 0)"}'