FabricJS：如何手动设置对象的宽度和高度

Question

我有一个织物矩形，我想手动更改宽度和高度。下一个问题是：当我第一次通过缩放调整矩形大小时，它会按预期调整大小，但是在此之后我尝试更改输入中的值 - 矩形重新呈现尺寸错误，但 [=22 中的宽度和高度值=] 对象正确。

代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<canvas id="draw"></canvas>
width:<input type="number" id="w" value="50">

var w = document.getElementById('w');

var c = new fabric.Canvas('draw');

var rect = new fabric.Rect({
  top: 50,
  left: 50,
  width: parseInt(w.value),
  height: parseInt(h.value),
  fill: 'lightblue',
  type: 'rect'
});

c.add(rect);
c.renderAll();

c.on('object:scaling', function(e) {
  var width = parseInt(e.target.width * e.target.scaleX);
  w.value = width;
});

w.addEventListener('change', function(e) {
  rect.set('width', parseInt(e.target.value));
  rect.setCoords();
  c.requestRenderAll();
});

screenshot jsfiddle

Answer 1

已找到解决方案，也许这会对某人有所帮助。当我们监听 width/height 的变化时，我们还应该考虑当前的比例值。

w.addEventListener('change', (e) => {
  const scale = rect.getObjectScaling();
  rect.set('width', parseInt(e.target.value) / scale.scaleX);
  rect.setCoords();
  rect.requestRenderAll();
});

FabricJS：如何手动设置对象的宽度和高度

FabricJS: How to manually set object width and height

javascript

fabricjs