javascript - Fabricjs - 调整大小无法在对象上正常工作

Question

我正在使用 FabricJs，一切都工作得非常顺利和良好，但现在我遇到了问题，我不知道为什么。

这是我的代码:

<canvas id="c" width="300" height="300"></canvas>
<input type="text" value="" placeholder="Rect width" id="rect-width">
<input type="text" value="" placeholder="Rect height" id="rect-height">

<button id="target">
Change
</button>

canvas.on('object:modified', function() {
  var obj = canvas.getActiveObject();
  $('#rect-width').val(Math.floor(obj.getWidth()));
  $('#rect-height').val(Math.floor(obj.getHeight()));

  console.log(Math.round(obj.getWidth()));
  console.log(Math.round(obj.getHeight()));
});


$( "#target" ).click(function() {
/*
var objwidth = $('#rect-width').val();
var objheight = $('#rect-height').val();
*/
var obj = canvas.getActiveObject();
var objwidth =  Math.floor(obj.getWidth());
var objheight = Math.floor(obj.getHeight());


console.log('Original: ' + Math.round(objwidth));
console.log('Orginal: ' + Math.round(objheight));

if(objwidth != '' && objheight != '') {
 rect1.setWidth(Math.round(objwidth));
 rect1.setHeight(Math.round(objheight));
}

http://jsfiddle.net/o0gkmjru/

每次当我缩放对象并按输入中的值提交时，它不会将其缩放到插入的大小。

有人可以解释一下为什么吗？

Answer 1

你需要告诉 Fabric 现在是渲染的时候了。只需将 canvas.renderAll(); 添加到点击处理程序的末尾，您就会看到矩形的大小发生变化。