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

【问题标题】：Calculate absolute coordinates in a canvas with panning & zoom使用平移和缩放计算画布中的绝对坐标
【发布时间】：2016-07-23 21:40:54
【问题描述】：

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

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

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

当我缩小或放大时，我无法找到画布的新中心底点。

【问题讨论】：

【解决方案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);

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

【讨论】：