北大计算机系多媒体与人机交互 1
第 6讲 图形变换
主要介绍
二维几何变换
窗口到视区的变换
三维几何变换
北大计算机系多媒体与人机交互 2
变换的数学基础 (1/4)
矢量
矢量和
?
?
?
?
?
?
?
?
?
?
?
z
y
x
u
u
u
U
?
?
?
?
?
?
?
?
?
?
?
z
y
x
v
v
v
V
?
?
?
?
?
?
?
?
?
?
?
?
?
??
zz
yy
xx
vu
vu
vu
VU
北大计算机系多媒体与人机交互 3
变换的数学基础 (2/4)
矢量的数乘
矢量的点积
性质
?
?
?
?
?
?
?
?
?
?
??
z
y
x
ku
ku
ku
Uk
zzyyxx vuvuvuVU ????
UVVU ???
VUVU ???? 0
00 ???? UUU
北大计算机系多媒体与人机交互 4
变换的数学基础 (3/4)
矢量的长度
单位矢量
矢量的夹角
矢量的叉积
222 zyx uuuUUU ?????
VU
VU
?
???c o s
zyx
zyx
vvv
uuu
kji
VU ??
北大计算机系多媒体与人机交互 5
变换的数学基础 (4/4)
矩阵
阶矩阵
n阶方阵
零矩阵
行向量与列向量
单位矩阵
矩阵的加法
矩阵的数乘
矩阵的乘法
矩阵的转置
矩阵的逆
m n?
北大计算机系多媒体与人机交互 6
二维基本变换（ 1/3）
平移变换
TPP ???
??
?
??
?
?
???
y
xP ?
?
?
??
??
y
x
t
tT
??
?
??
??
y
xP
?
?
?
???
???
y
x
tyy
txx
北大计算机系多媒体与人机交互 7
二维基本变换（ 2/3）
旋转变换
点 P(x,y,)的极坐标表示
绕坐标原点旋转角度 （ 逆时针为正, 顺时
针为负 ）
?
PRP ???
??
?
??
? ??
??
??
c o ss i n
s i nc o sR
北大计算机系多媒体与人机交互 8
二维基本变换（ 3/3）
放缩变换
以坐标原点为放缩参照点
不仅改变了物体的大小和形状，也改变了它
离原点的距离
PSP ???
??
?
??
??
y
x
s
sS
0
0
北大计算机系多媒体与人机交互 9
齐次坐标与二维变换的矩阵表示 （ 1/4）
为什么需要齐次坐标？
多个变换作用于多个目标
变换合成
变换合成的问题
引入齐次坐标
变换的表示法统一
北大计算机系多媒体与人机交互 10
齐次坐标与二维变换的矩阵表示（ 2/4）
齐次坐标
定义
(x,y)点对应的齐次坐标为
(x,y)点对应的齐次坐标为三维空间的一条
直线
(,,)x y hh h
0,,??? hhyyhxx hh
?
?
?
?
?
?
?
?
hz
hyy
hxx
h
h
h
北大计算机系多媒体与人机交互 11
齐次坐标与二维变换的矩阵表示（ 3/4）
标准齐次坐标 (x,y,1)
二维变换的矩阵表示
平移变换
旋转变换
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1
),(
1100
10
01
1
y
x
ttTy
x
t
t
y
x
yxy
x 记为
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
? ?
?
?
?
?
?
?
?
?
?
?
?
?
?
1
)(
1100
0c o ss i n
0s i nc o s
1
y
x
Ry
x
y
x
???
??
记为
北大计算机系多媒体与人机交互 12
齐次坐标与二维变换的矩阵表示（ 4/4）
放缩变换
变换具有统一表示形式的优点
便于变换合成
便于硬件实现
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1
),(
1100
00
00
1
y
x
ssSy
x
s
s
y
x
yxy
x 记为
北大计算机系多媒体与人机交互 13
复合变换及变换的模式（ 1/6）
问题：如何实现复杂变换？
关于任意参照点 的旋转变换
变换分解 变换合成
P x yr r r(,)
),()(),();,( rrrrrr yxTRyxTyxR ????? ??
北大计算机系多媒体与人机交互 14
复合变换及变换的模式（ 2/6）
关于任意参照点 的放缩变换P x yr r r(,)
),(),(),(),;,( rryxrryxrr yxTssSyxTssyxS ?????
北大计算机系多媒体与人机交互 15
复合变换及变换的模式（ 3/6）
变换的结果与变换的顺序有关（矩阵乘
法不可交换）
Rotate2D(45);
Translate2D(1,0);
House();
Translate2D(1,0);
Rotate2D(45);
House();
北大计算机系多媒体与人机交互 16
复合变换及变换的模式（ 4/6）
变换的固定坐标系模式
相对于同一个固定坐标系
先调用的变换先执行，后调用的变换后执行
Rotate2D(45);
Translate2D(1,0);
House();
北大计算机系多媒体与人机交互 17
复合变换及变换的模式（ 5/6）
人的思维方式
每次变换产生一个新的坐标系
变换的活动坐标系模式
先调用的变换后执行，后调用的变换先执行
（图形系统一般用堆栈实现）
北大计算机系多媒体与人机交互 18
复合变换及变换的模式（ 6/6）
Rotate2D(45);
Translate2D(1,0);
House();
例子
北大计算机系多媒体与人机交互 19
其它变换（ 1/6）
对称变换
关于 x轴的对称变换
关于 y轴的对称变换
?
?
?
?
?
?
?
?
?
?
??
100
010
001
xSY
?
?
?
?
?
?
?
?
?
??
?
100
010
001
ySY
北大计算机系多媒体与人机交互 20
其它变换 (2/6)
关于任意轴的对称变换
北大计算机系多媒体与人机交互 21
其它变换 (3/6)
错切变换
以 y轴为依赖轴的错切变换
以 y=0为参考轴
?
?
?
?
?
?
?
?
?
?
?
100
010
01
)(
x
xy
sh
shSH
??
?
??
???
yy
yshxx x
北大计算机系多媒体与人机交互 22
其它变换 (4/6）
以 为参考轴y yref?
?
?
?
?
?
?
?
?
?
? ??
?
100
010
1
),(
r e fxx
r e fxy
yshsh
yshSH
x’ = x + shx ( y – yref)
y’= y
北大计算机系多媒体与人机交互 23
其它变换（ 5/6）
以 x轴为依赖轴的错切变换
?
?
?
???
??
yxshy
xx
y
?
?
?
?
?
?
?
?
?
?
?
100
01
001
)( yyx shshSH
北大计算机系多媒体与人机交互 24
其它变换（ 6/6）
仿射变换
??
?
????
????
fdycxy
ebyaxx
?
?
?
?
?
?
?
?
?
?
?
100
fdc
eba
A f
北大计算机系多媒体与人机交互 25
二维图形的显示流程图（ 1/4）
坐标系：建立了图形与数之间的对应联系
世界坐标系 (world coordinate)
用户坐标系 (user coordinate)
局部坐标系 (local coordinate)
北大计算机系多媒体与人机交互 26
二维图形的显示流程图（ 2/4)
屏幕坐标系 (screen coordinate)
设备坐标系 (device coordinate)
北大计算机系多媒体与人机交互 27
二维图形的显示流程图（ 3/4）
窗口
在世界坐标系中指定的矩形区域
用来指定要显示的图形
视区
在设备坐标系（屏幕或绘图纸）上指定的矩
形区域
用来指定窗口内的图形在屏幕上显示的大小
及位置
窗口到视区的变换
北大计算机系多媒体与人机交互 28
二维图形的显示流程图（ 4/4）
北大计算机系多媒体与人机交互 29
窗口到视区的变换（ 1/2）
目标
将窗口之中的图形变换到视区中
变换的求法
变换的分解与合成
),(),(),( m i nm i nm i nm i n yxTEEEESvuTM
y
v
x
x
wv ???
北大计算机系多媒体与人机交互 30
窗口到视区的变换（ 2/2）
),()(),(),( mi nmi nmi nmi n yxTREEEESvuTM
y
v
x
x
wv ???? ?
北大计算机系多媒体与人机交互 31
三维几何变换（ 1/5）
三维其次坐标
(x,y,z)点对应的齐次坐标为
标准齐次坐标 (x,y,z,1)
右手坐标系
),,,( hzyx hhh
0,,,???? hhzzhyyhxx hhh
北大计算机系多媒体与人机交互 32
三维几何变换（ 2/5）
平移变换
放缩变换
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
100
010
001
),,(
z
y
x
zyx
t
t
t
tttT
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
100
010
001
),,(
z
y
x
zyx
s
s
s
sssS
北大计算机系多媒体与人机交互 33
三维几何变换（ 3/5）
旋转变换
绕 x轴
绕 x轴
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0c o ss i n0
0s i nc o s0
0001
)(
??
??
?xR
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0c o ss in
0010
0s in0c o s
)(
??
??
?yR
北大计算机系多媒体与人机交互 34
三维几何变换（ 4/5）
绕 z轴
错切变换
?
?
?
?
?
?
?
?
?
?
?
? ?
?
1000
0100
00c o ss i n
00s i nc o s
)(
??
??
?zR
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0100
010
001
),(
y
x
yxz
sh
sh
shshSH
北大计算机系多媒体与人机交互 35
三维几何变换（ 5/5）
对称变换
关于坐标平面 xy的对称变换
三维变换的一般形式
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0
0
0
333231
232221
131211
aaa
aaa
aaa
A
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0100
0010
0001
xySY
北大计算机系多媒体与人机交互 36
坐标系之间的变换
什么是？
建立坐标系之间的变换关系
将图形从一个坐标系中变换到另一个坐标系
中
怎样求？
北大计算机系多媒体与人机交互 37
习题
7、在坐标系 oxyz中，求一个变换将
P(1,1,1)Q(2,2,2)变换到 z轴上,P在坐
标原点,Q在 z轴正半轴。
x
y
z
P
Q
o x
y
z
Q o(P)
M
第 6讲 图形变换
主要介绍
二维几何变换
窗口到视区的变换
三维几何变换
北大计算机系多媒体与人机交互 2
变换的数学基础 (1/4)
矢量
矢量和
?
?
?
?
?
?
?
?
?
?
?
z
y
x
u
u
u
U
?
?
?
?
?
?
?
?
?
?
?
z
y
x
v
v
v
V
?
?
?
?
?
?
?
?
?
?
?
?
?
??
zz
yy
xx
vu
vu
vu
VU
北大计算机系多媒体与人机交互 3
变换的数学基础 (2/4)
矢量的数乘
矢量的点积
性质
?
?
?
?
?
?
?
?
?
?
??
z
y
x
ku
ku
ku
Uk
zzyyxx vuvuvuVU ????
UVVU ???
VUVU ???? 0
00 ???? UUU
北大计算机系多媒体与人机交互 4
变换的数学基础 (3/4)
矢量的长度
单位矢量
矢量的夹角
矢量的叉积
222 zyx uuuUUU ?????
VU
VU
?
???c o s
zyx
zyx
vvv
uuu
kji
VU ??
北大计算机系多媒体与人机交互 5
变换的数学基础 (4/4)
矩阵
阶矩阵
n阶方阵
零矩阵
行向量与列向量
单位矩阵
矩阵的加法
矩阵的数乘
矩阵的乘法
矩阵的转置
矩阵的逆
m n?
北大计算机系多媒体与人机交互 6
二维基本变换（ 1/3）
平移变换
TPP ???
??
?
??
?
?
???
y
xP ?
?
?
??
??
y
x
t
tT
??
?
??
??
y
xP
?
?
?
???
???
y
x
tyy
txx
北大计算机系多媒体与人机交互 7
二维基本变换（ 2/3）
旋转变换
点 P(x,y,)的极坐标表示
绕坐标原点旋转角度 （ 逆时针为正, 顺时
针为负 ）
?
PRP ???
??
?
??
? ??
??
??
c o ss i n
s i nc o sR
北大计算机系多媒体与人机交互 8
二维基本变换（ 3/3）
放缩变换
以坐标原点为放缩参照点
不仅改变了物体的大小和形状，也改变了它
离原点的距离
PSP ???
??
?
??
??
y
x
s
sS
0
0
北大计算机系多媒体与人机交互 9
齐次坐标与二维变换的矩阵表示 （ 1/4）
为什么需要齐次坐标？
多个变换作用于多个目标
变换合成
变换合成的问题
引入齐次坐标
变换的表示法统一
北大计算机系多媒体与人机交互 10
齐次坐标与二维变换的矩阵表示（ 2/4）
齐次坐标
定义
(x,y)点对应的齐次坐标为
(x,y)点对应的齐次坐标为三维空间的一条
直线
(,,)x y hh h
0,,??? hhyyhxx hh
?
?
?
?
?
?
?
?
hz
hyy
hxx
h
h
h
北大计算机系多媒体与人机交互 11
齐次坐标与二维变换的矩阵表示（ 3/4）
标准齐次坐标 (x,y,1)
二维变换的矩阵表示
平移变换
旋转变换
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1
),(
1100
10
01
1
y
x
ttTy
x
t
t
y
x
yxy
x 记为
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
? ?
?
?
?
?
?
?
?
?
?
?
?
?
?
1
)(
1100
0c o ss i n
0s i nc o s
1
y
x
Ry
x
y
x
???
??
记为
北大计算机系多媒体与人机交互 12
齐次坐标与二维变换的矩阵表示（ 4/4）
放缩变换
变换具有统一表示形式的优点
便于变换合成
便于硬件实现
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1
),(
1100
00
00
1
y
x
ssSy
x
s
s
y
x
yxy
x 记为
北大计算机系多媒体与人机交互 13
复合变换及变换的模式（ 1/6）
问题：如何实现复杂变换？
关于任意参照点 的旋转变换
变换分解 变换合成
P x yr r r(,)
),()(),();,( rrrrrr yxTRyxTyxR ????? ??
北大计算机系多媒体与人机交互 14
复合变换及变换的模式（ 2/6）
关于任意参照点 的放缩变换P x yr r r(,)
),(),(),(),;,( rryxrryxrr yxTssSyxTssyxS ?????
北大计算机系多媒体与人机交互 15
复合变换及变换的模式（ 3/6）
变换的结果与变换的顺序有关（矩阵乘
法不可交换）
Rotate2D(45);
Translate2D(1,0);
House();
Translate2D(1,0);
Rotate2D(45);
House();
北大计算机系多媒体与人机交互 16
复合变换及变换的模式（ 4/6）
变换的固定坐标系模式
相对于同一个固定坐标系
先调用的变换先执行，后调用的变换后执行
Rotate2D(45);
Translate2D(1,0);
House();
北大计算机系多媒体与人机交互 17
复合变换及变换的模式（ 5/6）
人的思维方式
每次变换产生一个新的坐标系
变换的活动坐标系模式
先调用的变换后执行，后调用的变换先执行
（图形系统一般用堆栈实现）
北大计算机系多媒体与人机交互 18
复合变换及变换的模式（ 6/6）
Rotate2D(45);
Translate2D(1,0);
House();
例子
北大计算机系多媒体与人机交互 19
其它变换（ 1/6）
对称变换
关于 x轴的对称变换
关于 y轴的对称变换
?
?
?
?
?
?
?
?
?
?
??
100
010
001
xSY
?
?
?
?
?
?
?
?
?
??
?
100
010
001
ySY
北大计算机系多媒体与人机交互 20
其它变换 (2/6)
关于任意轴的对称变换
北大计算机系多媒体与人机交互 21
其它变换 (3/6)
错切变换
以 y轴为依赖轴的错切变换
以 y=0为参考轴
?
?
?
?
?
?
?
?
?
?
?
100
010
01
)(
x
xy
sh
shSH
??
?
??
???
yy
yshxx x
北大计算机系多媒体与人机交互 22
其它变换 (4/6）
以 为参考轴y yref?
?
?
?
?
?
?
?
?
?
? ??
?
100
010
1
),(
r e fxx
r e fxy
yshsh
yshSH
x’ = x + shx ( y – yref)
y’= y
北大计算机系多媒体与人机交互 23
其它变换（ 5/6）
以 x轴为依赖轴的错切变换
?
?
?
???
??
yxshy
xx
y
?
?
?
?
?
?
?
?
?
?
?
100
01
001
)( yyx shshSH
北大计算机系多媒体与人机交互 24
其它变换（ 6/6）
仿射变换
??
?
????
????
fdycxy
ebyaxx
?
?
?
?
?
?
?
?
?
?
?
100
fdc
eba
A f
北大计算机系多媒体与人机交互 25
二维图形的显示流程图（ 1/4）
坐标系：建立了图形与数之间的对应联系
世界坐标系 (world coordinate)
用户坐标系 (user coordinate)
局部坐标系 (local coordinate)
北大计算机系多媒体与人机交互 26
二维图形的显示流程图（ 2/4)
屏幕坐标系 (screen coordinate)
设备坐标系 (device coordinate)
北大计算机系多媒体与人机交互 27
二维图形的显示流程图（ 3/4）
窗口
在世界坐标系中指定的矩形区域
用来指定要显示的图形
视区
在设备坐标系（屏幕或绘图纸）上指定的矩
形区域
用来指定窗口内的图形在屏幕上显示的大小
及位置
窗口到视区的变换
北大计算机系多媒体与人机交互 28
二维图形的显示流程图（ 4/4）
北大计算机系多媒体与人机交互 29
窗口到视区的变换（ 1/2）
目标
将窗口之中的图形变换到视区中
变换的求法
变换的分解与合成
),(),(),( m i nm i nm i nm i n yxTEEEESvuTM
y
v
x
x
wv ???
北大计算机系多媒体与人机交互 30
窗口到视区的变换（ 2/2）
),()(),(),( mi nmi nmi nmi n yxTREEEESvuTM
y
v
x
x
wv ???? ?
北大计算机系多媒体与人机交互 31
三维几何变换（ 1/5）
三维其次坐标
(x,y,z)点对应的齐次坐标为
标准齐次坐标 (x,y,z,1)
右手坐标系
),,,( hzyx hhh
0,,,???? hhzzhyyhxx hhh
北大计算机系多媒体与人机交互 32
三维几何变换（ 2/5）
平移变换
放缩变换
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
100
010
001
),,(
z
y
x
zyx
t
t
t
tttT
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
100
010
001
),,(
z
y
x
zyx
s
s
s
sssS
北大计算机系多媒体与人机交互 33
三维几何变换（ 3/5）
旋转变换
绕 x轴
绕 x轴
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0c o ss i n0
0s i nc o s0
0001
)(
??
??
?xR
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0c o ss in
0010
0s in0c o s
)(
??
??
?yR
北大计算机系多媒体与人机交互 34
三维几何变换（ 4/5）
绕 z轴
错切变换
?
?
?
?
?
?
?
?
?
?
?
? ?
?
1000
0100
00c o ss i n
00s i nc o s
)(
??
??
?zR
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0100
010
001
),(
y
x
yxz
sh
sh
shshSH
北大计算机系多媒体与人机交互 35
三维几何变换（ 5/5）
对称变换
关于坐标平面 xy的对称变换
三维变换的一般形式
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0
0
0
333231
232221
131211
aaa
aaa
aaa
A
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1000
0100
0010
0001
xySY
北大计算机系多媒体与人机交互 36
坐标系之间的变换
什么是？
建立坐标系之间的变换关系
将图形从一个坐标系中变换到另一个坐标系
中
怎样求？
北大计算机系多媒体与人机交互 37
习题
7、在坐标系 oxyz中，求一个变换将
P(1,1,1)Q(2,2,2)变换到 z轴上,P在坐
标原点,Q在 z轴正半轴。
x
y
z
P
Q
o x
y
z
Q o(P)
M
