在具有平移和缩放功能的画布中计算绝对坐标

Question

我该如何计算画布的特定位置（例如底部中心），在更改视口位置和缩放级别后？目前，我正在尝试类似以下代码，但它仅适用于视口：

```javascript ctx.canvas.width * 0.5 - viewportTransform[4], ctx.canvas.height - 100 - viewportTransform[5] ```

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

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

- Taqi Mustafa

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应具有放大和/或平移视图中心底部点的绝对坐标。

- AndreaBogazzi