adding custom attributes to fabricjs object

Question

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'

Answer 1

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

Answer 2

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.

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

Answer 4

I know it's old but this works on version 2.2.3

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

let obj={hello:'World'};
trimLine.set('helloworld',obj);

then you can get the object

  var myObj = e.target.get('helloworld');