Question

我有一个用Fabric js构建的画布。我需要在单击坐标的鼠标按下事件上绘制1x1像素的矩形。在画布上单击时，如果之前已转换画布，则必须转换该点。为此，我使用以下方法：

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

转换点后，我只需添加矩形：

const p = new fabric.Rect({
 left: transformedPoint.x,
 top: transformedPoint.y,
 fill: 'red',
 width: 1,
 height: 1,
});
this.add(p);

问题是变换后的点不是100％准确，并且矩形总是在距原始点X像素处绘制。

我做了一个片段来解释这种行为。上下文最初以60的缩放比例进行了转换：

    fabric.Object.prototype.selectable = false;
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;
    canvas = new fabric.Canvas('canvas');
    canvas.setWidth(screenWidth);
    canvas.setHeight(screenHeight);
    canvas.setZoom(60);
    canvas.on('mouse:down', (opt) => {
      const evt = opt.e;
      canvas.selection = false;
      canvas.isDragging = true;
      const point = new fabric.Point(opt.e.offsetX, opt.e.offsetY);
      const iM = fabric.util.invertTransform(canvas.viewportTransform);
      const transformedPoint = fabric.util.transformPoint(point, iM);
      const p = new fabric.Rect({
       left: transformedPoint.x,
       top: transformedPoint.y,
       fill: 'red',
       width: 1,
       height: 1,
      });
      canvas.add(p);
    });

body {
  margin:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.min.js"></script>


<canvas id="canvas"></canvas>

我在这里想念什么？非常感谢

Answer 1

我终于解决了。我认为问题正在改变重点！但是实际上，它就像那种织物绘制了一个看不见的边界一样愚蠢。我要做的就是设置 Object.strokeWidth = 0

将画布点转换为画布上下文点

1 个答案: