Html5 Canvas 变换算法 - 应用变换后查找对象坐标

Question

在 html5 画布上我正在绘制对象（矩形、圆形等...），这些对象具有缩放、倾斜、旋转等变换属性...这些对象可以嵌套。

当我应用变换后，我想找到给定对象的精确 x，y 坐标，但它超出了我的能力时，就会出现问题。

致所有热爱交互式计算机图形学的专家；请帮我解决这个问题。

提前致谢。

Answer 1

2D 中的所有仿射变换都可以表示为以下形式的矩阵：

    [ a  c  dx ]
T = [ b  d  dy ]
    [ 0  0   1 ]

这可以用方法

context.transform(a, b, c, d, dx, dy);

来表达。

当应用于某个坐标

(x,y)

时，您首先必须添加第三个坐标，该坐标始终为

1

：

<x, y, 1>

。然后将变换矩阵相乘即可得到结果：

[ a*x + c*y + dx ]
[ b*x + d*y + dy ]
[       1        ]

如果最后一个坐标中得到除“1”以外的任何值，则必须将向量除以它。

---

要走另一条路，你必须反转矩阵：

[ d/M  -c/M  (c*dy - d*dx)/M ]
[ b/M   a/M  (b*dx - a*dy)/M ]
[  0     0          1        ]

其中

M

是

(a*d - b*c)

。

---

可以通过将它们的矩阵相乘来按顺序应用多个变换。乘法的顺序很重要。

---

context.translate(dx,dy) <==> context.transform( 1,  0,  0,  1, dx, dy)
context.rotate(θ)        <==> context.transform( c,  s, -s,  c,  0,  0)
context.scale(sx,sy)     <==> context.transform(sx,  0,  0, sy,  0,  0)

其中

c = Math.cos(θ)

和

s = Math.sin(θ)

---

如果您在对象空间中获得了一些坐标

(x,y)

，并且您想知道它将在屏幕上的最终位置，则可以对其应用变换。

如果屏幕上有某个坐标

(x,y)

，并且您想知道对象上的哪个点，则乘以变换的倒数。

Answer 2

Tom Larkworthy 的答案很完美，但有一个小错字。 正确的矩阵求逆公式是：

[  d/M  -c/M  (c*dy - d*dx)/M ]
[ -b/M   a/M  (b*dx - a*dy)/M ]
[   0     0          1        ]

Answer 3

我发现自己也在进行类似的搜索。这是我编写的用于将屏幕空间坐标投影到画布坐标的函数：

function translateCoordinates(e)
{
    var canvas = document.getElementById('canvas');
    const transform = window.getComputedStyle(canvas).transform;
    const matrix = new DOMMatrixReadOnly(transform);
    const invertedMatrix = matrix.inverse();

    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    const transformedPoint = invertedMatrix.transformPoint({ x: mouseX, y: mouseY });
    const adjustedX = transformedPoint.x;
    const adjustedY = transformedPoint.y;

    return [adjustedX, adjustedY];
}