使用画布获取转换后的坐标

Question

如果我在画布上使用像translate/这样的转换函数rotate，那么所有点在传递给任何画布函数时都会被转换。这就像一个魅力，但是否还有一种方法可以在不实际绘制的情况下简单地获得转换点？

这在调试时非常有用。我现在所能做的就是查看该点的结束位置，但我似乎无法获得计算出的变换坐标。

那么，假设我旋转 90 度，是否有任何函数可以获取一个点（即(10, 0)）并将变换后的点返回（即(0, 10)）？

我的意思基本上是这样的：

ctx.rotate(90 * Math.PI / 180);
ctx.transformed(10, 0); // would return (0, 10) as an array or something

Answer 1

现在这是可能的，使用DOMMatrix从返回CanvasRenderingContext2D.getTransform（） ：

const point = {x: 0, y: 0};
const matrix = ctx.getTransform();
const transformedPoint = {
  x: matrix.a * point.x + matrix.c * point.y + matrix.e,
  y: matrix.b * point.x + matrix.d * point.y + matrix.f,
};

Answer 2

简短的回答是“不是默认的”。

您需要自己跟踪当前的转换，因为无法获取它（人们已经提交了错误，因为这似乎没有必要）。

像Cake.js这样的库，以及我们很多人，本质上都是复制转换代码，以便跟踪它，这样我们就可以做这样的事情。一旦你跟踪它，你所需要的就是：

function multiplyPoint(point) {
  return {
    x: point.x * this._m0 + point.y * this._m2 + this._m4,
    y: point.x * this._m1 + point.y * this._m3 + this._m5
  }
}