使用平移和縮放計算畫布中的絕對坐標

Question

如何在更改視口位置和縮放級別后計算畫布的特定位置（例如底部中心）？

現在我正在嘗試這樣的事情。 但它只適用於視口。

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

當我縮小或放大時 ，我無法找到畫布的新中心底點。

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應該具有在縮放和/或平移視圖中看作中心底部的點的絕對坐標。