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

【问题标题】：Transforming canvas point to canvas context point将画布点转换为画布上下文点
【发布时间】：2019-04-26 15:02:21
【问题描述】：

我有一个用 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 像素处绘制。

我做了一个 sn-p 来解释这种行为。上下文最初以 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>

我在这里缺少什么？非常感谢

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

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

【讨论】：