2D 绘图中的坐标系统和坐标变换

Slide 1

Slide 1 text

坐标系统与坐标变换 FEX 刘家鸣

Slide 2

Slide 2 text

坐标系统概述 • 原点 • 互相垂直的两条数轴 • ⾓角度定义

Slide 3

Slide 3 text

数学上 X（0°） Y（90°） 45° 坐标系统概述

Slide 4

Slide 4 text

屏幕上 X（0°） Y（90°） 45° 坐标系统概述

Slide 5

Slide 5 text

视野与世界 • 世界是⽆无穷⼤大的 • 视野是观察世界的⼀一个矩形区域 • 坐标系在世界中

Slide 6

Slide 6 text

世界视野

Slide 7

Slide 7 text

锤⼦子的故事

Slide 8

Slide 8 text

从前有⼀一个画家

Slide 9

Slide 9 text

他很擅⻓长画锤⼦子

Slide 10

Slide 10 text

有⼀一天他改⾏行当程序员

Slide 11

Slide 11 text

⽼老板说 “你用程序画一个锤子吧”

Slide 12

Slide 12 text

太简单了 x1 y1 h1 x2 y2 h2 w1 w2 X Y

Slide 13

Slide 13 text

⽼老板⼜又说 “锤子往右挪100像素吧”

Slide 14

Slide 14 text

没问题 x1 y1 h1 x2 y2 h2 w1 w2 X Y

Slide 15

Slide 15 text

没问题 x1 + 100 y1 h1 x2 + 100 y2 h2 w1 w2 X Y

Slide 16

Slide 16 text

？？？

Slide 17

Slide 17 text

⾃自⾝身坐标系和参考坐标系 • 为图形复合⽽而⽣生的机制 • 只在⾼高层绘图技术中⽀支持（如SVG、VML） • 定义 • 区别

Slide 18

Slide 18 text

定义 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 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥

Slide 24

Slide 24 text

平移 OA OB 线性变换 1 0 10 0 1 10 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥

Slide 25

Slide 25 text

旋转 OA 线性变换 • 使⽤用极坐标求变换矩阵 OB X = r ⋅cos(α) Y = r isin(α) ⎧ ⎨ ⎩ 极坐标⽅方程：旋转 θ 度后： X ' = r ⋅cos(α +θ) Y ' = r isin(α +θ) ⎧ ⎨ ⎩ 展开： X ' = r ⋅cos α ( )cos θ ( )− r ⋅sin α ( )sin θ ( )= cos θ ( )X − sin θ ( )Y + 0 Y ' = r ⋅cos α ( )sin θ ( )+ r ⋅sin α ( )cos θ ( )= sin θ ( )X + cos θ ( )Y + 0 ⎧ ⎨ ⎪ ⎩ ⎪

Slide 26

Slide 26 text

旋转 OA 线性变换 O B • 使⽤用极坐标求变换矩阵 cos(30°) −sin(30°) 0 sin(30°) cos(30°) 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ X = r ⋅cos(α) Y = r isin(α) ⎧ ⎨ ⎩ 极坐标⽅方程：旋转 θ 度后： X ' = r ⋅cos(α +θ) Y ' = r isin(α +θ) ⎧ ⎨ ⎩ 展开： X ' = r ⋅cos α ( )cos θ ( )− r ⋅sin α ( )sin θ ( )= cos θ ( )X − sin θ ( )Y + 0 Y ' = r ⋅cos α ( )sin θ ( )+ r ⋅sin α ( )cos θ ( )= sin θ ( )X + cos θ ( )Y + 0 ⎧ ⎨ ⎪ ⎩ ⎪

Slide 27

Slide 27 text

缩放 OA 线性变换 • a 和 c 直观控制缩放 OB

Slide 28

Slide 28 text

缩放 OA 线性变换 • a 和 c 直观控制缩放 OB 2 0 0 0 2 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥

Slide 29

Slide 29 text

变换列表 OA 线性变换 • 表⽰示⼀一系列的变换，结果为变换的矩阵的乘积 M = Mn · Mn-1 · ... · M2 · M1 · M0 • 后⾯面的变换乘在前⾯面 1 0 10 0 1 10 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ i cos(30°) −sin(30°) 0 sin(30°) cos(30°) 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ Mtranslate · Mrotate O B

Slide 30

Slide 30 text

变换列表 OA 线性变换 • 表⽰示⼀一系列的变换，结果为变换的矩阵的乘积 O B M = Mn · Mn-1 · ... · M2 · M1 · M0 • 后⾯面的变换乘在前⾯面 O C Mtranslate · Mrotate Mrotate · Mtranslate • 顺序影响结果

Slide 31

Slide 31 text

前驱坐标系和图形的变换矩阵线性变换 • 前驱坐标系：⽗父容器的坐标系 • 图形的变换矩阵M：⾃自⾝身坐标系到前驱坐标系的变换 • 变换的效果会叠加

Slide 32

Slide 32 text

前驱坐标系和图形的变换矩阵线性变换 OB OA

Slide 33

Slide 33 text

前驱坐标系和图形的变换矩阵线性变换 OB OA MA 1. 设置A的变换矩阵MA

Slide 34

Slide 34 text

OC 前驱坐标系和图形的变换矩阵线性变换 OB OA MA 1. 设置A的变换矩阵MA 2. 把B放置在C中

Slide 35

Slide 35 text

前驱坐标系和图形的变换矩阵线性变换 1. 设置A的变换矩阵MA 2. 把B放置在C中 3. 设置B的变换矩阵MB OC O B O A M A MB 此时，OA 到OC 的变换为： MB·MA

Slide 36

Slide 36 text

Q&A