javascript - 使用平移和缩放计算 Canvas 中的绝对坐标

Question

如何在更改视口(viewport)位置和缩放级别后计算 Canvas 的特定位置(例如底部中心)？

现在我正在尝试这样的事情。但它仅适用于视口(viewport)。

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

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

Answer 1

你必须使用矩阵。你的底 Angular 有坐标:

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 应该具有您在缩放和/或平移 View 中看到的中心底部点的绝对坐标。