добавления пользовательских атрибутов fabricjs объект

Question

Im пытается добавить пользовательский атрибут к ткани расслоения плотного объекту, у меня есть:

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

так вот мой прямоугольник им пытается добавить и я хочу передать имя или идентификатор он сможет идентифицировать его позже, когда я получу объект canvas и преобразую его в json.

Я попытался сделать

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

и это не сработало я также пытался сделать

trimline.name = 'trimLine' 

Answer 1

Для тех, которые работают в той же проблеме, как я решить это, выполнив следующие действия :

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

прямо под ним я добавил этот код:

  trimLine.toObject = function() { 
       return { 
        name: 'trimline' 
       }; 
      }; 

     canvas.add(trimLine); 
     canvas.renderAll(); 

Итак, теперь, когда я конвертирую холст в json, объект trimline возвращает только имя, которое мне нужно. Конечно, вы также можете добавить любую другую информацию, которая вам нужна.

Answer 2

name:trimLine должен быть name:"trimLine", если вы ранее объявили var trimLine='myTrimLineName'.

FabricJS имеет много свойств, включая name.

Чтобы избежать перезаписи этих нативные свойства, добавить суб-свойство, чтобы указать, это ваши собственные пользовательские свойства:

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