javascript - 使用 Canvas 获取变换后的坐标

如果我在 Canvas 上使用诸如translate/rotate的转换函数，则所有点在传递给任何 Canvas 函数时都会被转换。这就像一个咒语一样工作，但是还有一种方法可以简单地获取转换点而无需实际绘制吗？

这在调试时将非常有帮助。我现在所能做的就是寻找该点的终点，但似乎无法获得计算出的转换坐标。

那么，假设我旋转90度，是否有任何函数需要一个点(即(10, 0))并将转换后的点返回(即(0, 10))？

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

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

最佳答案

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

您将需要自己跟踪当前的转换，因为没有办法获取它(人们提交了bugs，因为这似乎太不必要了)。

像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
  }
}