[英]Fabric.js Object disappears after change properties programmatically
我在使用Fabric新版本时遇到麻烦,如1.4.2
以编程方式更改对象属性后,对象将从画布上消失。
在较旧的版本(如1.3.7)中,除我以编程方式更改属性后手动调整大小外,所有其他功能均可用。 在这种情况下,对象也消失了)
我有一些输入控件(类型编号)来设置属性,并且在这些输入控件中有观察者onchange事件。 更改时将调用该函数:
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();
}
}
有人能帮我吗?
谢谢。
尝试去除角度:a后的逗号。 或者,您可以尝试使用以下命令分别设置每个参数
objectio.set('left', x);
objectio.set('top', y);
等等。 您可以做的另一件事是对要设置的所有值进行类型检查,以查看所有值是否均为int类型而不是字符串类型。 我曾经遇到过同样的问题,并且意识到我要设置的值之一是字符串。
希望这可以帮助。
非常感谢Benick。
问题不在于set方法,而是在于分配给他的值,因为正如您所说的那样,它们被当作字符串而不是整数。
解决方法很简单,将var Assignemet代码更改为:
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());
而且有效。
但是,奇怪的是,在该结构的较旧版本中,此字符串值可以正常使用
再次感谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.