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

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 ="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform" rel="noreferrer">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
  }
}