向fabricjs对象添加自定义属性

时间:2015-05-19 22:07:04

标签: javascript canvas fabricjs

我试图将自定义属性添加到我拥有的结构js对象:

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

这样我的矩形我试图添加,我想在其中传递一个名称或ID,以便能够在以后获取画布对象并将其转换为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'

3 个答案:

答案 0 :(得分:5)

除非您之前已声明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);}

答案 1 :(得分:4)

对于那些遇到同样问题的人,我解决这个问题的方法是做以下几点:

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

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

在它下面我添加了这段代码:

 ( ! ) Fatal error: Uncaught exception 'Symfony\Component\DependencyInjection\Exception\ServiceNotFoundException' with message 'The service "hwi_oauth.resource_owner.google" has a dependency on a non-existent service "session".' in E:\Servidor\Wamp\wamp\www\DEVELOPMENT\magnetics\vendor\symfony\symfony\src\Symfony\Component\DependencyInjection\Compiler\CheckExceptionOnInvalidReferenceBehaviorPass.php on line 64

所以现在当我将画布转换为json时,trimline对象只返回我需要的名称。当然,您也可以添加您需要的任何其他信息。

答案 2 :(得分:0)

我知道它已经过时了,但这适用于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);

然后你可以得到对象

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