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)屏幕上有一些坐标,并且想要知道对象上的哪个点,则乘以变换的倒数.