【问题标题】:What is the logic behind canvas' transform method signature?canvas 的 transform 方法签名背后的逻辑是什么?
【发布时间】:2011-04-25 00:12:54
【问题描述】:

根据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

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

【问题讨论】:

    标签: math html canvas


    【解决方案1】:

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

    作用于笛卡尔坐标中的二维向量的 2x2 矩阵只能执行线性变换(缩放、倾斜和围绕原点的旋转 - 而不是平移)。

    为了获得仿射二维变换(包括平移),您需要使用齐次坐标。在实际应用中,这意味着您增加了三个维度,为所有向量添加了一个虚拟的“z”坐标,并且每当您想要进行 2D 平移时,您实际上都执行了垂直于 z 轴的 3D 倾斜。这是第三列。

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

    您编写的矩阵的第三行对应于 z 的值。只要该行保持“0 0 1”,x 和 y 就不会影响 z,并且它保持为 1。如果您可以设置该行,您可能会不小心让 x 和 y “泄漏”到 z 中,或者将值相乘z的,从那时起你所有的转变都表现得很奇怪。锁定该行可以防止这种情况发生,而不会取消任何有用的转换。

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

    【讨论】:

      【解决方案2】:

      符号取决于您的位置向量被表示为列或行。没什么不好的。

      对于一个全面而简单的教程(但你的符号颠倒了)你可以看here

      HTH!

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-05-06
        • 2017-10-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多