使用平移和缩放计算 canvas 中的绝对坐标

Question

如何在更改视口位置和缩放级别后计算 canvas 的特定位置（例如底部中心）？

现在我正在尝试这样的事情。但它只适用于视口。

canvasPoint = {
   left:(canvas.width/2)-canvas.viewportTransform[4],
   top: canvas.height-canvas.viewportTransform[5]
}

当我缩小或放大时，我找不到canvas的新中心底点.

Answer 1

你必须使用矩阵。您的底角有坐标：

var p = {x: canvas.width/2, y: canvas.height};

您的缩放和平移由 viewportTransfom 表示：

var invertedMatrix = fabric.util.invertTransform(canvas.viewportTransform);
var transformedP = fabric.util.transformPoint(p, invertedMatrix);

你应该完成了。 transformedP 应该具有您在缩放 and/or 平移视图中看到的中心底部点的绝对坐标。

Calculate absolute coordinates in a canvas with panning & zoom