修改后如何获取Fabric.js对象的正确高度和宽度

Question

绘制对象并用鼠标修改对象后，坐标（Object.width 和 Object.height）保持与最初绘制的对象相同。

const button = document.querySelector('button');

function load() {
  const canvas = new fabric.Canvas('c');
  const rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 10,
    top: 10,
    fill: 'yellow',
  });

  function objectAddedListener(ev) {
    let target = ev.target;
    console.log('left', target.left, 'top', target.top, 'width', target.width, 'height', target.height);
  }

  function objectMovedListener(ev) {
    let target = ev.target;
    console.log('left', target.left, 'top', target.top, 'width', target.width, 'height', target.height);
  }

  canvas.on('object:added', objectAddedListener);
  canvas.on('object:modified', objectMovedListener);

  canvas.add(rect);

}

load();

button.addEventListener('click', load);

见代码笔

Answer 1

width = target.width * target.scaleX, 
height = target.height * target.scaleY

由于我们正在缩放，因此您需要将 scaleX 和 scaleY 值分别乘以宽度和高度。这是更新的代码笔