齐次坐标在图形变换中的意义

所谓齐次坐标就是将一个原本是n维的向量用一个n+1维向量来表示。详细一点的解释，就百度百科&维基…

齐次坐标在图形变换中有着非常重要的意义，有了它，使很多复杂的图形变换变得更加简单。下面拿css中得transform来举例：

css的transform属性中支持这样两个方法：matrix & matrix3d，这两个方法分别表示图形要经过二维矩阵变换和三维矩阵变换。

以二维矩阵变换为例：

若如上图所示，那么matrix其实只需要传入4个参数，但是matrix这个方法要求是传入9个参数，需要的是一个3*3的矩阵。这里就涉及到了齐次坐标这个概念。

如果按上面示例所示，如果我们希望一个图形平移到指定距离，那么x' = ax + cy这个表达式将无法实现这个操作。

为了解决这个问题，我们为原始向量[x, y]补一个齐次坐标，那么上面的矩阵乘法将变成如下所示：

那么当a = d = 1，b = c = 0时，e 和 f分别代表了图形在x轴和y轴的平移单位。

下面有一个关于矩阵的demo（二维就是33的输入框有效，三维就是44输入框有效）：链接