以编程方式更改属性后，Fabric.js对象消失

Question

I´m having troubles with fabric new versions, as 1.4.2

After I change object properties programmatically, objects dissappears from canvas.

With older versions, as 1.3.7, all works except when I resize manually after change propeties programmatically. In this case, object also dissappears)

I have some input controls (type number) to set the properties, and I observer onchange event in these input controls. When change it calls the function:

function cambiarobjeto()
{

numero=damecapa(); //(I have some canvas in some divs, this function give me what is active canvas at this moment)
var canvasactivo=canvaslist[numero];  //(I assign the active canvas to a variable).

var objetico=0;

if (canvasactivo.getActiveObject())
    {

    //(I assign the active object to a variable)
    objetico=canvasactivo.getActiveObject();

    }

if (objetico!=0)
    {

//(I observer if input controls are not null and are correct. If aren´t, I set the value to actual parameter of the canvas active object)

    if ($('#manual_posicionx').val()=='' || isNaN($('#manual_posicionx').val())) {$('#manual_posicionx').val(objetico.left);}
    if ($('#manual_posiciony').val()=='' || isNaN($('#manual_posiciony').val())) {$('#manual_posiciony').val(objetico.top);}
    if ($('#manual_anchura').val()=='' || isNaN($('#manual_anchura').val())) {$('#manual_anchura').val(objetico.width*objetico.scaleX);}
    if ($('#manual_altura').val()=='' || isNaN($('#manual_altura').val())) {$('#manual_altura').val(objetico.height*objetico.scaleY);}
    if ($('#manual_angulo').val()=='' || isNaN($('#manual_angulo').val())) {$('#manual_angulo').val(objetico.angle);}
    if ($('#manual_angulo').val()<0 ) {$('#manual_angulo').val(0);}
    if ($('#manual_angulo').val()>359) {$('#manual_angulo').val(359);}

//(Assing input values to variables. If don´t do this, object set doesn´t works)

    var x=$('#manual_posicionx').val(),
    y=$('#manual_posiciony').val(),
    w=$('#manual_anchura').val(),
    h=$('#manual_altura').val(),
    a=$('#manual_angulo').val();
    ww=objetico.width;
    hh=objetico.height;

//(Set object properties with the inputs values)

//OPTION 1 (doesn´t works)

    objetico.set(
    {
    left: x,
    top: y,
    scaleX: w/ww,
    scaleY: h/hh,
    angle: a,
    });

//OPTION 2 (doesn´t works)

    objetico.left=x;
    objetico.top=y;
    objetico.scaleX=w/ww;
    objetico.scaleY=h/hh;
    objetico.angle=a;

//(And finally do object setcoords, render canvas and calcoffset)

    objetico.setCoords();
    canvasactivo.renderAll();
    canvasactivo.calcOffset();       
    }

}

Can someone help me?

Thanks.

Answer 1

Try to remove the comma after angle : a in your object. Alternatively you can try to set each a parameter individually with

objectio.set('left', x);
objectio.set('top', y);

and so on. Another thing you can do is a type check on all the values you are setting to see if all values are of type int and not strings. I had the same problem once and realized that one of values I was setting was a string.

Hope this helps.

Answer 2

Thanks a lot Benick.

The problem was not in the set method, was in the values ​​that were assigned to him, because as you said, were being taken as strings rather than as integers.

The solution is simply, change var assignemet code to:

var x=parseInt($('#manual_posicionx').val()),
y=parseInt($('#manual_posiciony').val()),
w=parseInt($('#manual_anchura').val()),
h=parseInt($('#manual_altura').val()),
a=parseInt($('#manual_angulo').val());

and it works.

However, it is strange that in older versions of this fabric work properly with string values

Thanks again!