5

如果我在画布上使用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
4

2 回答 2

6

现在可以使用从CanvasRenderingContext2D.getTransform ()返回的DOMMatrix ：

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,
};
于 2020-07-10T19:49:38.723 回答
4

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

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

像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
  }
}
于 2011-05-23T15:07:22.570 回答