定义
OC OB
OA
var a = new Rect(100, 50, 0, 0);
var b = new Rect(20, 120, 40, 50);
var c = new Group().addShapes([a, b]);
⾃自⾝身坐标系和参考坐标系
Slide 19
Slide 19 text
区别
OC OB
OA
⾃自⾝身坐标系和参考坐标系
1. 产⽣生的场景不同
⾃自⾝身坐标系:与⽣生俱来
参考坐标系:在从属关系中
2. 数量不同
⾃自⾝身坐标系:有且仅有 1 个
参考坐标系:可以有 n 个
3. 使⽤用的⺫⽬目的不同
⾃自⾝身坐标系:为了定义图形
参考坐标系:为了观察图形
Live Example
Slide 20
Slide 20 text
坐标变换
• 定义
• 线性变换
• 线性变换列表
• 前驱坐标系与图形的变换矩阵
Slide 21
Slide 21 text
定义
• 数学上,「坐标变换」
是采⽤用⼀一定的数学⽅方法
将⼀一个坐标系的坐标变
换为另⼀一个坐标系的坐
标的过程。
• 2D 绘图中,「坐标变
换」是对⼀一个坐标系到
另⼀一个坐标系的变换的
描述
坐标变换
OC OB
OA
Slide 22
Slide 22 text
线性变换
坐标变换
• 线性变换公式
X’ = aX + cY + e
Y’ = bX + dY + f
• 变换矩阵,记为 M
a c e
b d f
0 0 1
⎡
⎣
⎢
⎢
⎢
⎤
⎦
⎥
⎥
⎥
Slide 23
Slide 23 text
线性变换
• 线性变换公式
X’ = aX + cY + e
Y’ = bX + dY + f
• 变换矩阵,记为 M
OA
OB
坐标变换
1 0 10
0 1 10
0 0 1
⎡
⎣
⎢
⎢
⎢
⎤
⎦
⎥
⎥
⎥
a c e
b d f
0 0 1
⎡
⎣
⎢
⎢
⎢
⎤
⎦
⎥
⎥
⎥