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

你需要告诉面料是时候渲染了。只需将canvas.renderAll();添加到点击处理程序的末尾，您就会看到矩形更改大小。

Fabricjs - Resize在对象上无法正常工作

1 个答案: