Question

我在Fabric.js中有一个基本的可缩放和可缩放的画布构建。我需要在单击的坐标位置的每个mousedown事件上绘制一个矩形。当画布从其初始状态转换时会发生问题-图形不准确，因为必须使用新矩阵转换坐标。

如何使用新矩阵从鼠标事件转换坐标？

这是我正在使用的代码。谢谢

canvas.on('mouse:down', function (opt) {
  const evt = opt.e;
  const p = new fabric.Rect({
    left: opt.e.offsetX,
    top: opt.e.offsetY,
    fill: 'red',
    width: 30,
    height: 30,
  });
  canvas.add(p);
});

更新1：我找到了一种转换点的方法（fabric.util.transformPoint（）），但是根据画布上下文，转换后的点不正确。

  const evt = opt.e;
  const point = new fabric.Point(opt.e.offsetX, opt.e.offsetY);
  const transformedPoint = fabric.util.transformPoint(point, this.viewportTransform);
  const p = new fabric.Rect({
    left: transformedPoint.x,
    top: transformedPoint.y,
    fill: 'red',
    width: 30,
    height: 30,
  });
  this.add(p);

Answer 1

我终于使用fabric.util.transformPoint（）和一个反向矩阵解决了这个问题。这是将画布中的点转换为画布上下文中的点的代码。

  const point = new fabric.Point(offsetX, offsetY);
  const invertedMatrix = fabric.util.invertTransform(canvas.viewportTransform)
  const transformedPoint = fabric.util.transformPoint(point, invertedMatrix);

在mousedown事件上绘制矩形

1 个答案: