2

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

当我在应用转换后出现问题时，我想找到给定对象的确切 x、y 坐标，但它超出了我的想象。

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

提前致谢。

4

2 回答 2

10

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

    [ 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)在屏幕上得到了一些坐标，并且你想知道对象上的哪个点，你乘以变换的倒数。

于 2012-06-05T11:59:48.173 回答
0

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

[  d/M  -c/M  (c*dy - d*dx)/M ]
[ -b/M   a/M  (b*dx - a*dy)/M ]
[   0     0          1        ]
于 2020-12-29T18:19:10.020 回答