adding custom attributes to fabricjs object
Solution 1
For those that run into the same issue the way i solved this is by doing the following:
var trimLine = new fabric.Rect({
width: Math.round(obj.box_dimensions.trimbox.width,2),
height: Math.round(obj.box_dimensions.trimbox.height,2),
strokeWidth: 1,
stroke: 'rgb(255,2,2)',
fill: '',
selectable: false
});
right below it i added this code:
trimLine.toObject = function() {
return {
name: 'trimline'
};
};
canvas.add(trimLine);
canvas.renderAll();
So now when i convert the canvas to a json the trimline object only returns the name which is all i need. Of course you can also add any other info you need as well.
Solution 2
name:trimLine
should be name:"trimLine"
unless you have previously declared a var trimLine='myTrimLineName'
.
FabricJS has many attached properties, including the name
property.
To avoid overwriting these native properties, add a sub-property to indicate these are your own custom properties:
// example: using .my to hold your own custom properties
trimLine.my.name='trimLine';
trimLine.my.id='myOwnID15';
trimLine.my.sayName=function(){alert(this.my.name);}
Solution 3
Found a simple solution if your custom attribute is inside a variable,
var oText = new fabric.IText(text, {
left: 100,
top: 100 ,
transparentCorners: false
});
var attribute = 'my_attribute';
var value = 'first_name';
oText[attribute] = value;
canvas.add(oText);
canvas.renderAll();
Yeak
Updated on June 15, 2022Comments
-
Yeak almost 2 years
Im trying to add a custom attribute to a fabric js object that i have:
var trimLine = new fabric.Rect({ width: Math.round(obj.box_dimensions.box.width,2), height: Math.round(obj.box_dimensions.box.height,2), strokeWidth: 1, stroke: 'rgb(255,2,2)', fill: '', selectable: false });
so thats my rectangle im trying to add and i want to pass a name or id in it to be able to identify it later when i get the canvas object and convert it to a json.
I have tried doing
var trimLine = new fabric.Rect({ width: Math.round(obj.box_dimensions.box.width,2), height: Math.round(obj.box_dimensions.box.height,2), strokeWidth: 1, stroke: 'rgb(255,2,2)', fill: '', selectable: false, name: trimLine }); canvas.add(trimLine); canvas.renderAll();
and it did not work i also tried to do
trimline.name = 'trimLine'