图形学 第四章图形变换

第四章 图形变换

图形变换是计算机图形学的基础内容之一。图形在计算机上的显示可以比喻为用假想的照相机对物体进行拍照，并将产生的照片贴在显示屏上的指定位置进行观察的过程。三维物体要在屏幕上显示首先要做的就是投影变换。此外，还要求能够对物体进行旋转、缩放、平移变换。绘图过程还要用窗口规定显示物体的哪个部分，用视区来规定将窗口中的内容显示在屏幕上的什么位置。图形显示的过程见下图。

图4.1 图形显示的坐标变换过程

在本章中，我们将实现二维图形的几何变换、三维图形的投影变换，以及对图形进行裁剪的算法。

4.1变换的数学基础

在计算机图形学的图形变换过程中要大量的用到向量、矩阵以及它们之间的运算。本小节对这些知识做简要介绍。

一、向量及向量运算

一个物理量，如果我们只关心其数值的大小（例如物体的质量、体积、密度），则这样的量统称为标量，如果我们既关心其数值大小，还关心其方向（如速度），则这样的两统称为向量。标量一般用普通字体的英文字母显示，而向量一般用黑体英文字母显示。

设向量111(,,)x y z a ，222(,,)x y z b ，有关的向量运算有： （1） 两个向量的和、差运算

121212(,,)x x y y z z ±=±±±a b

（2） 两个向量的点乘运算

112233x y x y x y =++ a b

（3） 两个向量的叉乘运算

1

111221122112212

2

2

(,,)x y z y z y z z x z x x y x y x y z ?==---i

j k

a b （4） 向量的长度

||==a

二、矩阵及矩阵运算

由m n ?个数(1,2,,;1,2,,)ij a i m j n == 排成矩形表：

11

121212221

2n n

m m mn

a a a a a a a a a =

A

或简记成()ij mn a =A 或()ij m n a ?=A ，称为一个m 行n 列的矩阵，简称m n ?矩阵，ij a 叫做第i 行第j 列元素。当m n =时，A 叫做n 阶方针，此时元素(1,2,,)ii a i n = 称为主对角线元素。

只有一行的矩阵11121(,,,)n a a a 称为行向量，只有一列的矩阵11211m a a a ?? ? ?

? ???

称为列向量。

有关矩阵的运算有 （1） 数乘矩阵

用标量t 乘A 的每一个元素而得的矩阵称为t 与A 的乘积，记为：t A

11

1212122212n n

m m mn

ta ta ta ta ta ta t ta ta ta =

A

（2） 矩阵的加法运算

设有两个m n ?矩阵A ，B ，将它们对应元素相加而得到的矩阵称为A 与B 的和，记为A +B

1111

1212112121

2222

2211

22n n

n n

m m m m mn mn

a b a b a b a b a b a b a b a b a b ++++++=

+++A +B

（3） 矩阵的乘法运算

设有矩阵23()ij a ?=A ，32()ij b ?=B ，则此二矩阵相乘的积为矩阵C ：

111112211331111212221332211122212331211222222332a b a b a b

a b a b a b a b a b a b a b a b a b ++++??= ?++++??

C A B

可见，只有A 的列数等于B 的行数的时候，A B 才有意义。 矩阵运算有如下基本性质

（1） 数乘矩阵适合分配律和结合律

()t t t +=+A B A B ()t t =A B A B

1212()t t t t +=+A A A

1212()()t t t t =A A

（2） 矩阵加法适合结合律

+=+A B B A

()+=A B +C A +B +C

（3） 矩阵乘法对加法适合分配律

()()A B C =A B C

（4） 矩阵乘法不适合交换律，因为当两个矩阵A ，B 能够相乘时，B 与A 却未必能够相乘，即使A ，

B 都是方阵，A B 与B A 也未必相等。

()+=A B C A C+B C ()+=C A B C A +C B

在图形变换中还有用到如下的概念：

（1） 零矩阵及其运算

矩阵的所有元素均为零的矩阵称为零矩阵。一个m 行n 列的零矩阵记为m n ?0，对于任意的矩阵m n ?A 都与下式成立：

m n m n m n ???+=A 0A

（2） 单位矩阵

在一个方阵中，如果其主对角线元素全是1，而其余元素都是0，则称这样的矩阵为单位矩阵，记为n I 。对任意矩阵m n ?A ，有下式成立：

m n n m n ??=A I A m m n m n ??=I A A

（3） 逆矩阵

对于方阵A ，若存在矩阵B ，使得A B =I

，则称A 是可逆的，B 称为A 的逆，记为-1

A （4） 转置矩阵

将()ij m n a ?=A 的行、列互换而得到的n m ?矩阵，称为A 的转置矩阵，记为T

A 。矩阵的转置有如下的性质：

()=T T A A

()=+T T T A +B A B

()t t =T T A A

()=T T T A B B A

三、齐次坐标

齐次坐标表示法就是用1n +维的向量表示一个n 维向量。n 维空间中的点具有n 个坐标分量

12(,,,)n P P P ，并且是唯一的，用齐次坐标表示为12(,,,,)n hP hP hP h ，是不唯一的。使用齐次坐标还可

以表示无穷远点，规定当0h =时为无穷远点。 4.2 二维图形的几何变换

本节将讲解如何对二维图形进行几何变换，包括平移变换、比例变换、旋转变换、对称变换和错切变换。

1、 平移变换 平移变换是将平面上的一点(,)x y 沿平行于x 轴的方向平移x T ，沿平行于y 轴的方向平移y T 后变成点(,)x y '',则有

x x x T '=+，y y y T '=+

图4.2 平移变换

程序的功能如下。首先，在屏幕上显示一个默认的矩形，然后根据用户选择的不同操作对此矩形进行平移，平移操作是随着鼠标的移动而移动的。 程序步骤：

1） 首先，建立一个MFC 单文档工程，起名为“Ch4_2DTrans_2DTrans ”。

单击Workspace 中的ClassView 标签，双击CCh4_2DTrans_2DTransView ，在CCh4_2DTrans_2DTransView 类的定义之前定义一个枚举类型，代码如下：

2）在CCh4_2DTransView类的定义中添加如下成员变量：

3）右键单击CCh4_2DTransView，选择Add Member Function，在弹出的对话框中，Function Type设为void，Function Declaration设为ClearScreen()，单击确定。

4）单击CCh4_2DTransView左侧的+号，双击ClearScreen函数，在ClearScreen函数中添加如下代码：

5）右键单击CCh4_2DTransView，选择Add Member Function，在弹出的对话框中，Function Type设为void，Function Declaration设为DrawRect()，单击确定。

6）单击CCh4_2DTransView左侧的+号，双击DrawRect函数，在DrawRect函数中添加如下代码：

7）双击构造函数CCh4_2DTransView()，在其中添加如下代码：

8）单击Workspace中的ResourceViewView标签中的Menu左边的“+”号，双击其子项：IDR_MAINFRAME。9）建立名称为【二维图形变换】的菜单，并建立【平移】子菜单。ID号设为：IDT_TRANSLATE。如图

10）右键单击【平移】子菜单，选择ClassWizzard选项。在弹出的对话框中选择：Object IDs：IDT_TRANSLATE, Class name：CCh4_2DTransView，Messages：COMMAND，单击Add Function按钮，在弹出的为函数命名的对话框中单击OK，单击Edit Code按钮。

11）在函数OnTranslate()中添加代码：

12）按组合键Ctrl+W，调出ClassWizzard对话框，选择Object IDs：CCh4_2DTransView，Class name：CCh4_2DTransView，在Messages列表中双击

WM_LBUTTONDOWN,WM_LBUTTONUP,WM_MOUSEMOVE, WM_RBUTTONDOWN,

WM_RBUTTONUP, 单击Edit Code按钮。

13）分别在OnLButtonDown(UINT nFlags, CPoint point)、OnLButtonUp(UINT nFlags, CPoint point)、OnMouseMove(UINT nFlags, CPoint point)、OnRButtonDown(UINT nFlags, CPoint point)、

OnRButtonUp(UINT nFlags, CPoint point)函数中添加如下代码（黑体部分是添加的代码）：

void CCh4_2DTrans_TranslateView::OnLButtonUp(UINT nFlags, CPoint point)

{

// TODO: Add your message handler code here and/or call default

m_bLBDown = FALSE;

m_prevPoint = point;

CView::OnLButtonUp(nFlags, point);

}

void CCh4_2DTrans_TranslateView::OnRButtonDown(UINT nFlags, CPoint point) {

// TODO: Add your message handler code here and/or call default

m_bRBDown = TRUE;

m_prevPoint = point;

CView::OnRButtonDown(nFlags, point);

}

void CCh4_2DTrans_TranslateView::OnRButtonUp(UINT nFlags, CPoint point) {

// TODO: Add your message handler code here and/or call default

m_bRBDown = FALSE;

m_prevPoint = point;

CView::OnRButtonUp(nFlags, point);

}

void CCh4_2DTrans_TranslateView::OnMouseMove(UINT nFlags, CPoint point) {

// TODO: Add your message handler code here and/or call default

Int delta;

switch(m_type_transform)

{

case TRF_TRANSLATE:

if(m_bLBDown)

{

ClearScreen();

delta = point.x - m_prevPoint.x;

m_prevPoint = point;

m_LT += CPoint(delta * (int)m_xStep,0);

m_LB += CPoint(delta * (int)m_xStep,0);

m_RT += CPoint(delta * (int)m_xStep,0);

m_RB += CPoint(delta * (int)m_xStep,0);

DrawRect();

}

if(m_bRBDown)

{

ClearScreen();

delta = point.y - m_prevPoint.y;

m_prevPoint = point;

m_LT += CPoint(0,delta * (int)m_yStep);

m_LB += CPoint(0,delta * (int)m_yStep);

m_RT += CPoint(0,delta * (int)m_yStep);

m_RB += CPoint(0,delta * (int)m_yStep); DrawRect(); } break;

case TRF_NONE: break; }

CView::OnMouseMove(nFlags, point); }

至此，代码部分结束。

编译，运行，点击菜单项中的【平移】命令，出现如图所示矩形。

图4.3 平移代码运行结果

图中的矩形可以用鼠标进行平移，具体来说，鼠标的左键控制矩形左右平移，用鼠标右键控制矩形上下平移。

2、比例变换 比例变换是相对于原点，将平面上一点(,)x y 沿x 轴方向乘以常数x S ，沿y 轴方向乘以常数y S 后，变成点

(,)x y ''，则有

x x xS '=,y y yS '=

可见，如果1x y S S ==，则为恒等变换，图形不变，如果1x y S S =>，则图形被放大了，如果1x y S S =<则图形被缩小了。如果x y S S ≠，则图形在x 轴和y 轴方向被缩放的倍数不一样。

为了实现上述的功能，我们在前面代码的基础上继续添加代码。要求，可以令矩形根据用户输入的参数而放大和缩小。

程序步骤：

1)在枚举类型Type_Transform添加TRF_SCALE

2）单击Workspace中的ResourceView标签中的Menu左边的“+”号，双击其子项：IDR_MAINFRAME。3）在【二维图形变换】菜单的子菜单【平移】之下建立一个新的菜单【比例】，ID号设为：IDT_SCALE，如图所示

4）右键单击【比例】，选择Classwizzard，在弹出的对话框中选择Object IDs为IDT_SCALE，Class name选为CCh4_2DTransView，Messages选为Command，单击Add Functions，单击确定。

5）打开Workspace中的ResourceView，右键单击Dialog，选择Insert Dialog，则出现了一个新的对话框资源，其ID号是IDD_DIALOG1,右键单击其ID，选择Properties，将其ID号改为IDD_SCALE.

6）将两个静态文本框和两个编辑框加入到对话框中，编辑框的ID分别设为IDC_SCALE_SX,IDC_SCALE_SY，如图所示

7）右键单击对话框，选择Classward，点击确定。在弹出的New对话框中的Name栏中键入Dlg_Scale。

8）单击Member Variables标签，双击其中的IDC_SCALE_SX，在弹出的对话框中键入变量名：m_Sx,Variable type栏选择int，单击确定，同样，双击IDC_SCALE_SY，输入变量名：m_Sy。

9）点击Workspace中的ClassView标签，双击Dlg_scale，将m_Sx和m_Sy的类型改为double。

10）为了在CCh4_2DTransView类中能够调用对话框累Dlg_Scale需在CCh4_2DTransView类的开头部分加入头文件：#include “Dlg_Scale.h”

11）在OnScale（）函数中添加如下代码：

ClearScreen();

m_type_transform = TRF_SCALE;

m_LT = CPoint(100,300);

m_LB = CPoint(100,100);

m_RT = CPoint(300,300);

m_RB = CPoint(300,100);

DrawRect();

CClientDC dc(this);

CPen* oldPen;

CPen newPen(PS_DASH,1,RGB(0,0,0));

oldPen = dc.SelectObject(&newPen);

dc.MoveTo(0,0);

dc.LineTo(m_LT);

dc.MoveTo(0,0);

dc.LineTo(m_RB);

dc.SelectObject(oldPen);

double Sx = 1;

double Sy = 1;

Dlg_Scale dlgScale;

if(dlgScale.DoModal() == IDOK)

{

Sx = dlgScale.m_Sx;

Sy = dlgScale.m_Sy;

}

m_LT.x *= Sx;

m_LB.x *= Sx;

m_RT.x *= Sx;

m_RB.x *= Sx;

m_LT.y *= Sy;

m_LB.y *= Sy;

m_RT.y *= Sy;

m_RB.y *= Sy;

ClearScreen();

DrawRect();

oldPen = dc.SelectObject(&newPen);

dc.MoveTo(0,0);

dc.LineTo(m_LT);

dc.MoveTo(0,0);

dc.LineTo(m_RB);

dc.SelectObject(oldPen);

至此，代码部分结束。编译运行，点击菜单项的【比例】，出现如图所示图形和对话框：

在对话框中输入想要在x 和y 轴方向进行缩放的比例，点击确定，即可看到缩放之后的结果。

3、旋转变换

旋转变换是将图新绕某一旋转中心转动一个角度，通常约定以逆时针方向为正方向。最简单的旋转变换是以坐标原点(0,0)为旋转中心，这时，平面上一点(,)x y 旋转了θ

之后，变成点(,)x y ''，则有

cos sin x x y θθ'=-，sin cos y x y θθ'=+，

图4.4 旋转变换

为了实现旋转变换的功能，在前面代码的基础上继续添加代码。在本小节的代码中，我们将前面代码实现的矩形按照用户输入的参数进行旋转。 程序步骤：

1) 单击Workspace 中的ResourceView 标签中的Menu 左边的“+”号，双击其子项：IDR_MAINFRAME 。 2) 在【二维图形变换】菜单的子菜单【比例】之下建立一个新的菜单【旋转】，ID 号设为：IDT_ROTATE

x

y

3)右键单击【旋转】，选择Classwizzard，在弹出的对话框中选择Object IDs为IDT_ROTATE，Class name选

为CCh4_2DTransView，Messages选为Command，单击Add Functions，单击确定。

4)打开Workspace中的ResourceView，右键单击Dialog，选择Insert Dialog，则出现了一个新的对话框资源，

将其ID号改为IDD_ROTA TE.

5)将一个静态文本框和一个编辑框加入到对话框中，编辑框的ID设为IDC_ROTA TE_ANGLE。

6)右键单击对话框，选择Classward，点击确定。在弹出的New对话框中的Name栏中键入Dlg_Rotate。

7)单击Member Variables标签，双击其中的IDC_ROTA TE_ANGLE，在弹出的对话框中键入变量名：

m_RotateAngle,Variable type栏选择int，单击确定。

8)点击Workspace中的ClassView标签，双击Dlg_Rotate，将m_RotateAngle的类型改为double。

9)在CCh4_2DTransView类的开头部分加入头文件：#include “Dlg_Rotate.h”和#include “math.h”

10)在OnRotate（）函数中添加如下代码：

ClearScreen();

m_type_transform = TRF_ROTATE;

m_LT = CPoint(100,300);

m_LB = CPoint(100,100);

m_RT = CPoint(300,300);

m_RB = CPoint(300,100);

DrawRect();

CClientDC dc(this);

CPen* oldPen;

CPen newPen(PS_DASH,1,RGB(0,0,0));

oldPen = dc.SelectObject(&newPen);

dc.MoveTo(0,0);

dc.LineTo(m_LT);

dc.SelectObject(oldPen);

double angle = 0;

Dlg_Rotate dlgRotate;

if(dlgRotate.DoModal() == IDOK)

angle = dlgRotate.m_RotateAngle / 180 * 3.1415926;

double c = cos(angle);

double s = sin(angle);

m_LT.x = m_LT.x * c - m_LT.y * s;

m_LT.y = m_LT.x * s + m_LT.y * c;

m_LB.x = m_LB.x * c - m_LB.y * s;

m_LB.y = m_LB.x * s + m_LB.y * c; m_RT.x = m_RT.x * c - m_RT.y * s; m_RT.y = m_RT.x * s + m_RT.y * c; m_RB.x = m_RB.x * c - m_RB.y * s; m_RB.y = m_RB.x * s + m_RB.y * c; ClearScreen(); DrawRect(); oldPen = dc.SelectObject(&newPen); dc.MoveTo(0,0); dc.LineTo(m_LT); dc.SelectObject(oldPen);

至此，代码部分结束。编译运行，点击菜单项中的【旋转】，出现如图所示图形和对话框：

输入图形旋转的角度，按确定即可看到旋转之后的图形。

4、对称变换

对称变换的公式如下：

x ax by '=+，y dx ey '=+

当,,,a b c d 取不同值时，产生不同的对称变换。

（1） 当0,1,1b d a e ===-=时，产生相对于y 轴对称的反射图形。 （2） 当0,1,1b d a e ====-时，产生相对于x 轴对称的反射图形。 （3） 当0,1b d a e ====-时，产生相对于原点对称的反射图形。 （4） 当1,0b d a e ====时，产生相对于直线y x =对称的反射图形。 （5） 当1,0b d a e ==-==时，产生相对于直线y x =-对称的反射图形。

图4.5 对称变换

为实现对称变换的目的，我们仍然在前面代码的基础上继续添加代码。本小节，我们添加菜单项命令来实现关于y 轴、x 轴、原点、直线y = x 、直线y = -x 的对称变换。 程序步骤：

1) 单击Workspace 中的ResourceView 标签中的Menu 左边的“+”号，双击其子项：IDR_MAINFRAME 。 2) 在【二维图形变换】菜单的子菜单【旋转】之下建立一个新的菜单【对称】，勾选Pop-up 选项。在【对称】

菜单下新建菜单【关于y 轴】，其ID 号设为

IDT_SYMMETRY_Y

3) 右键单击【关于y 轴】，选择Classwizzard ，在弹出的对话框中选择Object IDs 为IDT_SYMMETRY_Y ，Class

name 选为CCh4_2DTransView ，Messages 选为Command ，单击Add Functions ，单击确定，点击Edit Code 编辑函数OnSymmetryY

4) 为CCh4_2DTransView 类增加一个成员函数 void DrawTriangle()，其代码为：

直线y x =对称

5) 在函数OnSymmetryY 中添加如下代码：

ClearScreen(); m_type_transform = TRF_SYMMETRY_Y; CClientDC dc(this); dc.MoveTo(0,300); dc.LineTo(800,300); dc.MoveTo(400,0); dc.LineTo(400,600); m_LT = CPoint(100,150); m_LB = CPoint(100,100); m_RB = CPoint(150,100); DrawTriangle(); double a = -1; double b = 0; double d = 0; double e = 1; int x = m_LT.x; int y = m_LT.y; m_LT.x = (x - 400) * a + (y - 300) * b + 400; m_LT.y = (x - 400) * d + (y - 300) * e + 300; x = m_LB.x; y = m_LB.y; m_LB.x = (x - 400) * a + (y - 300) * b + 400; m_LB.y = (x - 400) * d + (y - 300) * e + 300; x = m_RB.x; y = m_RB.y; m_RB.x = (x - 400) * a + (y - 300) * b + 400; m_RB.y = (x - 400) * d + (y - 300) * e + 300; DrawTriangle();

至于其它的对称方式是类似的，只需改变函数中的a 、b 、d 、e 的值即可。

5、错切

错切变换的公式为：

x x by '=+，y dx y '=+

(1) 当0d =时，图形的x 坐标随初值(,)x y 及变换常数b 做线性变换，如果0b >图形沿x 轴正方向

移位，如果0b <图形沿x 轴反方向移位。

(2) 当0b =时，图形的y 坐标随初值(,)x y 及变换常数d 做线性变换，如果0d >图形沿y 轴正方向

移位，如果0d <图形沿y 轴反方向移位。 (3) 当0,0b d ≠≠时，图形沿x ，y 两个方向移位。

实现沿x 方向、y 方向以及x 、y 两个方向的错切变换，在刚才的Ch4_2Dtrans_2Dtrans 工程的基础上添加代码。 程序步骤：

1) 单击Workspace 中的ResourceView 标签中的Menu 左边的“+”号，双击其子项：IDR_MAINFRAME 。 2) 在【二维图形变换】菜单的子菜单【对称】之下建立一个新的菜单【错切】，勾选Pop-up 选项。在【错切】

菜单下新建菜单【沿y 方向】，其ID 号设为IDT_SHEAR_Y 3) 右键单击【沿y 方向】，选择Classwizzard ，在弹出的对话框中选择Object IDs 为IDT_SHEAR_Y ，Class name

选为CCh4_2DTransView ，Messages 选为Command ，单击Add Functions ，单击确定，点击Edit Code 编辑函数OnShearY

4) 在函数OnShearY 中添加如下代码：

ClearScreen(); m_type_transform = TRF_SHEAR_Y; CClientDC dc(this); dc.MoveTo(0,300); dc.LineTo(800,300); dc.MoveTo(400,0); dc.LineTo(400,600); //相当于坐标原点放在(400,300) CPoint Origin = CPoint(400,300); CPoint LT = CPoint(-50,100); CPoint LB = CPoint(-50,-100); CPoint RT = CPoint(50,100); CPoint RB = CPoint(50,-100); m_LT = LT +Origin; m_LB = LB +Origin; m_RT = RT +Origin; m_RB = RB +Origin; DrawRect();

5) 在OnMouseMove()函数中添加如下一些新的局部变量：

Int x; Int y; double b; double d;

6) 在OnMouseMove 的switch 中添加如下代码： case TRF_SHEAR_X: if(m_bLBDown) { //清屏 ClearScreen(); CClientDC dc(this); dc.MoveTo(0,300); dc.LineTo(800,300);

dc.MoveTo(400,0);

dc.LineTo(400,600);

//更新矩形数据并画矩形

delta = point.x - m_prevPoint.x;

m_prevPoint = point;

b = 0.01;

d = 0;

x = m_LT.x - 400;

y = m_LT.y - 300;

m_LT.x = x + y * b * delta + 400;

m_LT.y = x * d * delta + y + 300;

x = m_LB.x - 400;

y = m_LB.y - 300;

m_LB.x = x + y * b * delta + 400;

m_LB.y = x * d * delta + y + 300;

x = m_RT.x - 400;

y = m_RT.y - 300;

m_RT.x = x + y * b * delta + 400;

m_RT.y = x * d * delta + y + 300;

x = m_RB.x - 400;

y = m_RB.y - 300;

m_RB.x = x + y * b * delta + 400;

m_RB.y = x * d * delta + y + 300;

DrawRect();

}

break;

7)沿x方向和沿x、y方向的错切变换是类似的。

编译运行，点击菜单中的沿y轴错切命令，出现如图所示图形。

按下鼠标左键，随着鼠标上下的移动，我们可以看到图中的图形在进行沿y轴方向的切变。

4.3 投影变换

我们知道，现有的图形显示设备是平面的，因此如果要将三维物体显示出来，必须用到投影的方法。本节中我们将实现平行投影中的一种正交投影：等轴投影以及斜交投影中的斜二测投影和斜等轴投影，最后实现透视投影。

1、平行投影