canvas'变换方法签名背后的逻辑是什么?

时间:2010-10-13 18:15:03

标签: math html5 canvas

根据http://www.html5samples.com/2010/03/html-5-canvas-the-2d-context-part-1/

这是context.transform方法的签名 context.transform(m11,m12,m21,m22,dx,dy)是将当前变换矩阵与下面描述的矩阵相乘:

m11 m21 dx

m12 m22 dy

 0   0  1

我想弄清楚这个签名背后的逻辑是什么?为什么不能设置矩阵的所有元素以及为什么按列顺序而不是行顺序列出参数?

2 个答案:

答案 0 :(得分:1)

您无法设置矩阵的第三行的原因是底行与您可能想要的任何变换都不对应。

在笛卡尔坐标系中作用于2D矢量的2x2矩阵只能执行线性变换(关于原点的缩放,倾斜和旋转 - 而不是平移)。

为了获得仿射2D变换(包括平移),您需要使用齐次坐标。在实际应用中,这意味着您最多可以凸起三维,为所有矢量添加虚拟“z”坐标,并且无论何时需要2D平移,您都可以实现垂直于z轴的3D倾斜。这是第三栏。

按照惯例(并且为了简单起见),虚拟z值始终为1.出于实际目的,它充当“翻译速度” - 加倍它会使您尝试执行的任何翻译的效果加倍。因此,我们不希望任何内容从1更改z值。

您编写的矩阵的第三行对应于z的值。只要该行保持“0 0 1”x并且y不能影响z,并且它保持为1.如果您可以设置该行,您可能会意外地让x和y“泄漏”到z中,或者乘以该值z,从那时起你所做的所有变换都非常奇怪。锁定该行可以防止这种情况发生,而不会带走任何有用的转换。

当然,这就是理论。实际上,软件甚至不可能包含第三行的模型。他们只使用假设为“0 0 1”的公式的特殊情况 - 这是答案的另一部分。您无法设置它,因为它实际上并不存在于软件的工作方式中。 ;)

答案 1 :(得分:0)

符号表示你的位置向量表示为列或行。没有什么不好的。

要获得全面而简单的教程(但你的符号反转),你可能会看here

HTH!