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

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

您需要自己跟踪当前的转换，因为无法获取它（人们提交了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
  }
}

Answer 2

现在可以使用ASCII value返回的DOMMatrix：

onChange={(e, newval) => {
        console.log(newval);
        setState(newval);
      }}

用画布获取变换坐标

2 个答案: