二维图形的几何变换

前面我们讲了如何绘制出一个二维图形，还讲了如何给它填充颜色，现在，我们又有了新的问题，如何在屏幕上移动这个图形呢。

二维图形变换与输出

坐标和变换的矩阵表示

想象一下，如果有一个点 (x, y)，我们想让它向右上方移动，只需要给 x 和 y 分别乘上对应的偏移量，得到 (s1*x, s2*y)。

计算过程很简单，可以直接列出两个表达式：

那如果我们在第一象限有一个矩形，四个顶点坐标分别是 (0, 0)、(x, 0)、(0, y)、(x, y)，现在想向右上方扩大这个图形——只需要移动除了原点 (0, 0) 以外的三个点。

直接套用刚才的平移公式，得到新的四个顶点：(0, 0)、(s1*x, 0)、(0, s2*y)、(s1*x, s2*y)。

这个计算虽然简单，但每次都要逐点列式子，不够规范化。怎么解决呢？

答案是用矩阵。

我们把点表示成列向量 ，用一个 的矩阵左乘它来完成变换：

这样，常见的几何操作都可以写入这个变换矩阵中。

缩放——将 x 方向缩放 倍、y 方向缩放 倍：

旋转——绕原点逆时针旋转 角度：

更重要的是，这些操作可以叠加——先缩放再旋转，只需把旋转矩阵乘在缩放矩阵的左边，合并成一个变换矩阵，然后用这一个矩阵去乘所有顶点即可：

可见，有了矩阵，我们可以自由便捷地用一个统一的框架处理图形的变换……吗？

现在回到刚才那个矩形。如果不是单纯的”向右上方扩大”，而是整体向右上方平移，同时还要扩大呢？

你会发现一个问题：

• 缩放是线性变换，可以用 矩阵乘法完成
• 平移不是线性变换，写成 x+a 是加法，无法塞进 的矩阵乘法里

一个操作能矩阵乘、另一个不能——这就是矛盾的根源。为了让平移也能用矩阵乘法表达，我们需要引入齐次坐标。

齐次坐标

齐次坐标是什么？

齐次坐标 = 给普通坐标”多加一个维度”，让所有变换都能用矩阵乘法统一表达。

为什么要搞齐次坐标？

在普通二维坐标下，旋转和缩放可以用 矩阵乘法完成，平移必须做加法。有的可以乘、有的必须加——处理起来不一致。

为了统一，我们把坐标和变换矩阵都扩大一维：

这里 是规范化的齐次坐标（ 坐标固定为 1 时，表示的就是普通二维点）。

引入了齐次坐标后，你会发现刚才困扰我们的平移操作，也能用一次矩阵乘法干净利落地完成：

缩放、旋转、平移——全部统一成了 矩阵左乘列向量。多个变换可以通过矩阵相乘叠加（从右向左读：最右边的矩阵最先作用于点），最后一次性应用到所有顶点上。

齐次变换矩阵

如图所示，在列向量体系下，齐次变换矩阵可以划分成四个区域：

下面我们来介绍一下常用的齐次变换矩阵：

平移变换矩阵

平移是一种不产生变形而移动物体的刚体变换（rigid-body transformation）。在齐次坐标下，平移变换矩阵为：

推导：平移变换的目标是 ，。在齐次坐标下写成矩阵左乘列向量的形式：

乘开后一目了然：第一行 ，第二行 ，第三行保持 不变。

比例变换矩阵

比例变换是指对点 相对于坐标原点沿 x 方向缩放 倍、沿 y 方向缩放 倍。 和 称为比例系数。在齐次坐标下，比例变换矩阵为：

推导：缩放的目标是 ，。写成矩阵形式：

一种特殊的整体比例变换也可以利用齐次坐标的 分量来实现——只更改右下角的标量值：

乘开后得到 ，归一化（除以 ）后变为 ，相当于整体缩放 倍。这种方式与直接缩放 、 在数值上等价，但在某些图形管线（如透视投影）中有特殊的语义意义。

旋转变换矩阵

旋转变换是指将点绕原点逆时针旋转 角度。二维旋转的数学推导基于极坐标变换：

因此，绕原点逆时针旋转 的齐次变换矩阵为：

应用旋转：

旋转矩阵是正交矩阵：。顺时针旋转 等价于逆时针旋转 ，即把 的符号取反。

反射变换矩阵

反射变换（也称镜像变换）将图形关于某条对称轴翻转。

关于 x 轴对称：y 坐标取反，x 不变。

关于 y 轴对称：x 坐标取反，y 不变。

关于原点对称：x、y 均取反（等价于旋转 180°）。

关于直线 对称：x 和 y 互换。

错切变换矩阵

错切变换（Shear）使图形在一个方向上发生倾斜，但保持面积不变。

沿 x 方向错切：y 不变，x 随 y 线性偏移。参数 控制倾斜程度。

沿 y 方向错切：x 不变，y 随 x 线性偏移。

错切变换矩阵的行列式为 ，因此它保持面积不变——这是错切与缩放的重要区别。

变换的性质

上面介绍的五种变换——平移、比例、旋转、反射、错切——统称为二维仿射变换（Affine Transformation）。它们的 齐次矩阵，第三行始终为 。

仿射变换具有两条核心不变性：

• 平行线不变性：变换前平行的直线，变换后依然平行
• 有限点数目的不变性： 个点变换后依然是 个点，不会合并或新增

平移、比例、旋转、错切和反射等均是二维仿射变换的特例；反过来，任何常用的二维仿射变换总可以表示为这五种变换的复合。

根据是否保持距离和角度，仿射变换可以进一步细分：

总结一下二维几何变换的几条通用性质：

• 直线的中点不变性：线段中点变换后仍是线段中点
• 平行直线不变性：平行线变换后仍然平行
• 相交不变性：相交的直线变换后仍然相交
• 仅包含旋转、平移和反射的变换维持角度和长度不变（刚体变换）
• 比例变换可改变图形的大小和形状（但保持相似性）
• 错切变换引起角度关系改变，导致图形发生倾斜畸变（但不改变面积）

这次的插图来自画师tektober

图片地址：https://www.pixiv.net/artworks/142098121