二维中的所有仿射变换都可以表示为以下形式的矩阵:
[ 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 ]
where M
is (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)
where c = Math.cos(θ)
and s = Math.sin(θ)
如果你有一些坐标(x,y)
在对象空间中,如果您想知道它最终会出现在屏幕上的哪个位置,则可以对其应用变换。
如果你有一些坐标(x,y)
在屏幕上,您想知道对象上的哪个点,您乘以变换的倒数。