计算机图形学——二维变换

二维变换

概念

应用于对象几何描述并改变其位置、方向或者大小的变换叫做几何变换，有时候也被叫做建模变换。而本文仅讨论平面中的几何变换，即二维变换。

矩阵表示和齐次坐标

对于普通的2x2矩阵，我们总是要将平移项与其它变换对应的矩阵写成不同规格，为了统一形式且方便运算，我们需要将2x2的矩阵扩展到3x3。此时，二为坐标必须用三元向量来表示。标准实现技术是将二维坐标$(x,y)$扩充到三维$(x_h,y_h,h)$，这称为齐次坐标，这个过程就被叫做齐次化。

对于每一个维度有
$$x=\frac{x_h}{h},y=\frac{y_h}{h}$$
其中非零值$h$被称为齐次参数。

显然对于齐次参数，可以有无数个非零值，同样也意味着有无数个等价的齐次表达式。既然如此，为了方便计算，不妨令$h=1$。

平移变换

对于平移变换，我们可有参数方程
{ x ′ = x + δ x y ′ = y + δ y

{x′=x+δxy′=y+δy​
我们将方程组转换为矩阵的形式
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ 1 0 0 0 1 0 δ x δ y 1 ]

[x′y′1]" role="presentation">[x′y′1]$$\left[\begin{array}{ccc}{x}^{\prime }& y^{\prime }& 1\end{array}\right]$$

=

[xy1]" role="presentation">[xy1]$$\left[\begin{array}{ccc}x& y& 1\end{array}\right]$$

\cdot

[100010δxδy1]" role="presentation">⎡⎣⎢10δx01δy001⎤⎦⎥$$\left[\begin{array}{ccc}1& 0& 0\\ 0& 1& 0\\ \delta x& \delta y& 1\end{array}\right]$$

[x′​y′​1​]=[x​y​1​]⋅ ​10δx​01δy​001​ ​

旋转变换

对于一个复杂的图形的旋转，我们可以看做是多个点在同时旋转。因此只需要研究出一个点的旋转变换方法就可以了。

我们不妨令点为平面任意一点，其绕原点进行旋转变换，该点的运动轨迹一定是一个以该点到原点连线为半径的圆弧。那么问题就简单了，对于旋转任意角度，我们只需要用圆的参数方程就能搞定，
{ x = cos ⁡ θ y = sin ⁡ θ

{x=cosθy=sinθ​
对于我们假设旋转了$\alpha$的弧度（逆时针为正方向），则有
{ x ′ = cos ⁡ ( θ + α ) = cos ⁡ θ cos ⁡ α − sin ⁡ θ sin ⁡ α = x cos ⁡ α − y sin ⁡ α y ′ = sin ⁡ ( θ + α ) = sin ⁡ θ cos ⁡ α + cos ⁡ θ sin ⁡ α = x sin ⁡ α + y cos ⁡ α

{x′=cos⁡(θ+α)=cos⁡θcos⁡α−sin⁡θsin⁡α=xcos⁡α−ysin⁡αy′=sin⁡(θ+α)=sin⁡θcos⁡α+cos⁡θsin⁡α=xsin⁡α+ycos⁡α" role="presentation">{x′=cos(θ+α)=cosθcosα−sinθsinα=xcosα−ysinαy′=sin(θ+α)=sinθcosα+cosθsinα=xsinα+ycosα$$\{\begin{array}{l}{x}^{\prime }=\cos (\theta +\alpha )=\cos \theta \cos \alpha -\sin \theta \sin \alpha =x\cos \alpha -y\sin \alpha \\ y^{\prime }=\sin (\theta +\alpha )=\sin \theta \cos \alpha +\cos \theta \sin \alpha =x\sin \alpha +y\cos \alpha \end{array}$$

{x′=cos(θ+α)=cosθcosα−sinθsinα=xcosα−ysinαy′=sin(θ+α)=sinθcosα+cosθsinα=xsinα+ycosα​
很显然对应矩阵形式为
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ cos ⁡ α sin ⁡ α 0 − sin ⁡ α cos ⁡ α 0 0 0 1 ]

[x′y′1]" role="presentation">[x′y′1]$$\left[\begin{array}{ccc}{x}^{\prime }& y^{\prime }& 1\end{array}\right]$$

=

[xy1]" role="presentation">[xy1]$$\left[\begin{array}{ccc}x& y& 1\end{array}\right]$$

\cdot

[cos⁡αsin⁡α0−sin⁡αcos⁡α0001]" role="presentation">⎡⎣⎢cosα−sinα0sinαcosα0001⎤⎦⎥$$\left[\begin{array}{ccc}\cos \alpha & \sin \alpha & 0\\ -\sin \alpha & \cos \alpha & 0\\ 0& 0& 1\end{array}\right]$$

[x′​y′​1​]=[x​y​1​]⋅ ​cosα−sinα0​sinαcosα0​001​ ​
那么问题来了，如果所绕的旋转点不是原点怎么办呢？

前面已经讲过平移变换了，只需要平移坐标系原点至该点（移轴），再进行旋转，最后平移回去就行了。

不妨令被围绕点坐标为$P(x_1,y_1)$，则该流程的矩阵运算如下：
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ 1 0 0 0 1 0 − x 1 − y 1 1 ] ⋅ [ cos ⁡ α sin ⁡ α 0 − sin ⁡ α cos ⁡ α 0 0 0 1 ] ⋅ [ 1 0 0 0 1 0 x 1 y 1 1 ]

= \cdot \cdot \cdot [x′​y′​1​]=[x​y​1​]⋅ ​10−x1​​01−y1​​001​ ​⋅ ​cosα−sinα0​sinαcosα0​001​ ​⋅ ​10x1​​01y1​​001​ ​
如果你对平移坐标系难以理解，不妨将坐标轴与平面想象成两个分离的东西。以坐标轴往右移动为例，则对于平面上的点来讲，就相当于坐标轴不动点向左平移。（平移坐标系只是移动的轴，不带平面上其他点，否则你会得到相反的结果！）

缩放变换

首先给出参数方程
{ x ′ = s x x y ′ = s y y

{x′=sx​xy′=sy​y​
对应矩阵运算为
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ s x 0 0 0 s y 0 0 0 1 ]

[x′y′1]" role="presentation" style="position: relative;">[x′y′1]$$\left[\begin{array}{ccc}{x}^{\prime }& y^{\prime }& 1\end{array}\right]$$

=

[xy1]" role="presentation" style="position: relative;">[xy1]$$\left[\begin{array}{ccc}x& y& 1\end{array}\right]$$

\cdot

[sx000sy0001]" role="presentation" style="position: relative;">⎡⎣⎢sx000sy0001⎤⎦⎥$$\left[\begin{array}{ccc}{s}_x& 0& 0\\ 0& s_y& 0\\ 0& 0& 1\end{array}\right]$$

[x′​y′​1​]=[x​y​1​]⋅ ​sx​00​0sy​0​001​ ​

对称变换

关于对称变换可以是轴对称或者点对称。

我们先来看关于y轴对称：只需要纵坐标不变，横坐标取相反数即可。

矩阵运算如下
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ − 1 0 0 0 1 0 0 0 1 ]

= \cdot [x′​y′​1​]=[x​y​1​]⋅ ​−100​010​001​ ​
同理可得关于y轴对称矩阵运算
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ 1 0 0 0 − 1 0 0 0 1 ]

[x′y′1]" role="presentation" style="position: relative;">[x′y′1]$$\left[\begin{array}{ccc}{x}^{\prime }& y^{\prime }& 1\end{array}\right]$$

=

[xy1]" role="presentation" style="position: relative;">[xy1]$$\left[\begin{array}{ccc}x& y& 1\end{array}\right]$$

\cdot

[1000−10001]" role="presentation" style="position: relative;">⎡⎣⎢1000−10001⎤⎦⎥$$\left[\begin{array}{ccc}1& 0& 0\\ 0& -1& 0\\ 0& 0& 1\end{array}\right]$$

[x′​y′​1​]=[x​y​1​]⋅ ​100​0−10​001​ ​
那么对于原点对称就有
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ − 1 0 0 0 − 1 0 0 0 1 ]

[x′y′1]" role="presentation" style="position: relative;">[x′y′1]$$\left[\begin{array}{ccc}{x}^{\prime }& y^{\prime }& 1\end{array}\right]$$

=

[xy1]" role="presentation" style="position: relative;">[xy1]$$\left[\begin{array}{ccc}x& y& 1\end{array}\right]$$

\cdot

[−1000−10001]" role="presentation" style="position: relative;">⎡⎣⎢−1000−10001⎤⎦⎥$$\left[\begin{array}{ccc}-1& 0& 0\\ 0& -1& 0\\ 0& 0& 1\end{array}\right]$$

[x′​y′​1​]=[x​y​1​]⋅ ​−100​0−10​001​ ​

如果是对于平面中任意一点$P(x_1,y_1)$对称，则平移坐标系原点至该点，然后进行关于原点的对称，再平移回去就行。
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ 1 0 0 0 1 0 − x 1 − y 1 1 ] ⋅ [ − 1 0 0 0 − 1 0 0 0 1 ] ⋅ [ 1 0 0 0 1 0 x 1 y 1 1 ]

= \cdot \cdot \cdot [x′​y′​1​]=[x​y​1​]⋅ ​10−x1​​01−y1​​001​ ​⋅ ​−100​0−10​001​ ​⋅ ​10x1​​01y1​​001​ ​
如果是关于平面内任意一条直线对称，那比较麻烦了，你需要先平移坐标系到直线的一点，并旋转坐标系使x轴与直线重合，然后进行关于x轴的对称变换，再旋转回去，然后再平移回去。

特别地，如果直线斜率不存在，平移后直线与y轴重合，那么直接进行关于y轴对称然后再平移回去即可。

注意该过程的顺序，因为矩阵并不满足交换律！

这里实际上是有两个大坑的，我们不妨假设直线经过的两点分别为
$$A(x_1,y_1),B(x_2,y_2)$$
不失一般性，我们令
$$x_1<=x_2$$
我们在上面已经说过直线斜率不存在的情况了，这里仅讨论直线斜率存在的情况。直线斜率为
$$k=\frac{\delta x}{\delta y}=\frac{y_2-y_1}{x_2-x_1}$$
我们想要得到直线与x轴的夹角，可以利用反正切函数
$$\theta =\arctan k$$
但是事实就是如此吗？注意反正切函数的取值范围为$(-\frac{\pi }{2},\frac{\pi }{2})$，而直线倾斜角范围是$[0,\pi ]$，即使挖去了$\frac{\pi }{2}$这个点（因为我们不讨论这种情况），范围仍不一致！

我们记倾斜角为$\alpha$，则有
α = { θ , 0 ≤ θ < π 2 π + θ , θ < 0 \alpha=

α={θ,π+θ,​0≤θ<2π​θ<0​
现在开始进入第二个坑了，我们进行旋转倾斜角的时候，是顺时针还是逆时针？

我们不妨站在坐标系的角度来看，逆时针旋转倾斜角的角度，就相当于顺时针旋转图形这个角度。

也就是说，我们在进行第一次旋转变换时输入的角度参数应该为$-\alpha$

综上所述，矩阵运算为
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ 1 0 0 0 1 0 − x 1 − y 1 1 ] ⋅ [ cos ⁡ α − sin ⁡ α 0 sin ⁡ α cos ⁡ α 0 0 0 1 ] ⋅ [ 1 0 0 0 − 1 0 0 0 1 ] ⋅ [ cos ⁡ α sin ⁡ α 0 − sin ⁡ α cos ⁡ α 0 0 0 1 ] ⋅ [ 1 0 0 0 1 0 x 1 y 1 1 ]

= \cdot \cdot \cdot \cdot \cdot [x′​y′​1​]=[x​y​1​]⋅ ​10−x1​​01−y1​​001​ ​⋅ ​cosαsinα0​−sinαcosα0​001​ ​⋅ ​100​0−10​001​ ​⋅ ​cosα−sinα0​sinαcosα0​001​ ​⋅ ​10x1​​01y1​​001​ ​

错切变换

错切变换实际上是物体在投影平面上非垂直投影的结果。一般为水平错切和垂直错切，也可以同时对两个方向进行错切。

我们先来看看沿y轴方向的错切

显然有方程
{ x ′ = x y ′ = y + x tan ⁡ θ

{x′=xy′=y+xtanθ​
有矩阵运算
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ 1 tan ⁡ θ 0 0 1 0 0 0 1 ]

[x′y′1]" role="presentation" style="position: relative;">[x′y′1]$$\left[\begin{array}{ccc}{x}^{\prime }& y^{\prime }& 1\end{array}\right]$$

=

[xy1]" role="presentation" style="position: relative;">[xy1]$$\left[\begin{array}{ccc}x& y& 1\end{array}\right]$$

\cdot

[1tan⁡θ0010001]" role="presentation" style="position: relative;">⎡⎣⎢100tanθ10001⎤⎦⎥$$\left[\begin{array}{ccc}1& \tan \theta & 0\\ 0& 1& 0\\ 0& 0& 1\end{array}\right]$$

[x′​y′​1​]=[x​y​1​]⋅ ​100​tanθ10​001​ ​
同理可得沿着x方向的错切矩阵运算
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ 1 0 0 tan ⁡ θ 1 0 0 0 1 ]

[x′y′1]" role="presentation" style="position: relative;">[x′y′1]$$\left[\begin{array}{ccc}{x}^{\prime }& y^{\prime }& 1\end{array}\right]$$

=

[xy1]" role="presentation" style="position: relative;">[xy1]$$\left[\begin{array}{ccc}x& y& 1\end{array}\right]$$

\cdot

[100tan⁡θ10001]" role="presentation" style="position: relative;">⎡⎣⎢1tanθ0010001⎤⎦⎥$$\left[\begin{array}{ccc}1& 0& 0\\ \tan \theta & 1& 0\\ 0& 0& 1\end{array}\right]$$

[x′​y′​1​]=[x​y​1​]⋅ ​1tanθ0​010​001​ ​
同时沿着x方向和y方向的错切
[ x ′ y ′ 1 ] = [ x y 1 ] ⋅ [ 1 tan ⁡ α 0 tan ⁡ θ 1 0 0 0 1 ]   α , θ ∈ ( − π 2 , π 2 )

[x′y′1]" role="presentation" style="position: relative;">[x′y′1]$$\left[\begin{array}{ccc}{x}^{\prime }& y^{\prime }& 1\end{array}\right]$$

=

[xy1]" role="presentation" style="position: relative;">[xy1]$$\left[\begin{array}{ccc}x& y& 1\end{array}\right]$$

\cdot

[1tan⁡α0tan⁡θ10001]" role="presentation" style="position: relative;">⎡⎣⎢1tanθ0tanα10001⎤⎦⎥$$\left[\begin{array}{ccc}1& \tan \alpha & 0\\ \tan \theta & 1& 0\\ 0& 0& 1\end{array}\right]$$

\space \alpha,\theta \in (-\frac{\pi}{2},\frac{\pi}{2}) [x′​y′​1​]=[x​y​1​]⋅ ​1tanθ0​tanα10​001​ ​ α,θ∈(−2π​,2π​)

刚体变换

如果一个矩阵仅包含平移参数和旋转参数，那么它就是一个刚体变换矩阵
$$
\begin{bmatrix}
x’& y’& 1
\end{bmatrix}

\cdot

$$

对于刚体变换左上角的2x2矩阵满足正交矩阵的特性。也就是说对于两个列向量 [ r x x r x y ] T

^{T} [rxx​​rxy​​]T和 [ r y x r y y ] T

[ryxryy]" role="presentation" style="position: relative;">[ryxryy]$$\left[\begin{array}{cc}{r}_{yx}& r_{yy}\end{array}\right]$$

^{T} [ryx​​ryy​​]T（或者两个行向量）形成单位向量的正交组，这样的向量也称为正交向量组。

对于每个向量具有单位长度，并且数量积为0：
$$\begin{gathered} r_{xx}^2+r_{xy}^2=r_{yx}^2+r_{yy}^2=1 \\ {r}_{xx}{r}_{yx}+r_{xy}{r}_{yy}=0 \end{gathered}$$
如果这些向量通过旋转矩阵进行变换，则可得出x方向和y方向的单位向量
[ r x x r x y 1 ] ⋅ [ r x x r y x 0 r x y r y y 0 0 0 1 ] = [ 1 0 1 ]

\cdot = [rxx​​rxy​​1​]⋅ ​rxx​rxy​0​ryx​ryy​0​001​ ​=[1​0​1​]

[ r y x r y y 1 ] ⋅ [ r x x r y x 0 r x y r y y 0 0 0 1 ] = [ 0 1 1 ]

\cdot = [ryx​​ryy​​1​]⋅ ​rxx​rxy​0​ryx​ryy​0​001​ ​=[0​1​1​]

代码

对于二维变换的代码相对来讲较麻烦一些，我不太喜欢OpenGL所带的矩阵运算操作，因此我自己写了一套简单的矩阵模版类。由于代码相对较长，我这里仅放出这几个变换的代码片段。

class Polygon
{
public:
    Transform::Matrix<GLdouble> *vex;

    Polygon(Pts vex)
    {
        this->vex = new Transform::Matrix<GLdouble>(vex.size(), 3, {{}}, 0);
        for (int i = 0; i < vex.size(); i++)
        {
            (*this->vex)[i][0] = vex[i].x;
            (*this->vex)[i][1] = vex[i].y;
            (*this->vex)[i][2] = 1;
        }
    }
    ~Polygon()
    {
        delete vex;
    }

    Polygon *Translate(const Point &end)
    {
        vector<vector<GLdouble>> temp{{1, 0, 0}, {0, 1, 0}, {end.x, end.y, 1}};
        Transform::Matrix<GLdouble> t(3, 3, temp);
        (*vex) = (*vex) * t;
        return this;
    }

    Polygon *Draw()
    {
        // cout << "Start" << endl;
        glBegin(GL_POLYGON);
        for (GLint i = 0; i < vex->CountRow(); i++)
        {
            // cout << i << ": " << (*vex)[i][0] << " " << (*vex)[i][1] << endl;
            glVertex2d((*vex)[i][0], (*vex)[i][1]);
        }
        glEnd();

        return this;
    }

    Polygon *Rotate(Point p, GLdouble radian)
    {
        Transform::Matrix<GLdouble> t1(3, 3, {{1, 0, 0}, {0, 1, 0}, {-p.x, -p.y, 1}});
        Transform::Matrix<GLdouble> t2(3, 3, {{cos(radian), sin(radian), 0}, {-sin(radian), cos(radian), 0}, {0, 0, 1}});

        Transform::Matrix<GLdouble> t3(3, 3, {{1, 0, 0}, {0, 1, 0}, {p.x, p.y, 1}});

        (*vex) = (*vex) * t1 * t2 * t3;
        return this;
    }

    Polygon *Scale(GLdouble x, GLdouble y)
    {
        if (x <= 0 || y <= 0)
        {
            cout << "WARNING: Invalid parameters" << endl;
            return this;
        }

        Transform::Matrix<GLdouble> t(3, 3, {
                                                {x, 0, 0},
                                                {0, y, 0},
                                                {0, 0, 1},
                                            });

        (*vex) = (*vex) * t;

        return this;
    }

    Polygon *PointReflect(const Point &p)
    {
        Transform::Matrix<GLdouble> t1(3, 3, {{1, 0, 0}, {0, 1, 0}, {-p.x, -p.y, 1}});
        Transform::Matrix<GLdouble> t2(3, 3, {
                                                 {-1, 0, 0},
                                                 {0, -1, 0},
                                                 {0, 0, 1},
                                             });
        Transform::Matrix<GLdouble> t3(3, 3, {{1, 0, 0}, {0, 1, 0}, {p.x, p.y, 1}});

        *vex = (*vex) * t1 * t2 * t3;
        return this;
    }

    Polygon *LineReflect(const Point &start, const Point &end, bool showAxis = false)
    {
        GLdouble x1 = start.x, x2 = end.x, y1 = start.y, y2 = end.y;
        if (x1 > x2)
            swap(x1, x2), swap(y1, y2);

        if (showAxis)
        {
            glBegin(GL_LINES);
            glVertex2d(x1, y1);
            glVertex2d(x2, y2);
            glEnd();
        }

        this->Translate({-x1, -y1});
        GLdouble dy = y2 - y1;
        GLdouble dx = x2 - x1;
        if (dx == 0)
        {
            Transform::Matrix<GLdouble> t(3, 3, {{-1, 0, 0}, {0, 1, 0}, {0, 0, 1}});

            *vex = (*vex) * t;
            this->Translate({x1, y1});
            return this;
        }

        GLdouble rad = atan(dy / dx);
        if (rad < 0)
            rad = 4 * atan(1) + rad;

        this->Rotate({0, 0}, -rad);
        Transform::Matrix<GLdouble> t1(3, 3, {{1, 0, 0}, {0, -1, 0}, {0, 0, 1}});
        *vex = (*vex) * t1;

        this->Rotate({0, 0}, rad);
        this->Translate({x1, y1});

        return this;
    }

    Polygon *Shear(const Point &sh)
    {
        Transform::Matrix<GLdouble> t1(3, 3, {{1, sh.y, 0}, {sh.x, 1, 0}, {0, 0, 1}});

        *vex = (*vex) * t1;
        return this;
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

完整代码请参考我的Github仓库: 2D变换-Github