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

Question

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

法典：

<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();

});

Answer 1

找到了解决方案，也许这会帮助某人。当我们监听宽度/高度的变化时，我们还应该考虑当前的比例值。w.addEventListener('change', (e) => {&nbsp; const scale = rect.getObjectScaling();&nbsp; rect.set('width', parseInt(e.target.value) / scale.scaleX);&nbsp; rect.setCoords();&nbsp; rect.requestRenderAll();});