Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2D 绘图中的坐标系统和坐标变换
Search
Baidu FEX Team
May 07, 2014
Technology
4
1k
2D 绘图中的坐标系统和坐标变换
本文介绍在 2D 绘图技术中的坐标系统和坐标变换的相关知识。同时介绍 Kity 在这方面提供的 API 。希望这些知识对于需要进行图形应用开发的同学会有所帮助。
Baidu FEX Team
May 07, 2014
Tweet
Share
More Decks by Baidu FEX Team
See All by Baidu FEX Team
HTML5富交互与社交传播
baidufe
1
860
F.I.S——提升产品性能与开发效率的前端解决方案
baidufe
1
670
跨端组件实践
baidufe
7
770
如何成为一名优秀的前端工程师
baidufe
19
2.5k
静态资源自动合并系统
baidufe
12
2.3k
基于HTML5技术的文件上传
baidufe
4
2.3k
百度前端基础数据平台介绍
baidufe
17
3.2k
Web富应⽤用的设计与开发
baidufe
4
790
如何做导师
baidufe
9
820
Other Decks in Technology
See All in Technology
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1.2k
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
100
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
750
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
8
2.3k
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Faster Mobile Websites
deanohume
308
31k
Practical Orchestrator
shlominoach
189
11k
Code Reviewing Like a Champion
maltzj
524
40k
The Cult of Friendly URLs
andyhume
79
6.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Agile that works and the tools we love
rasmusluckow
329
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
KATA
mclloyd
30
14k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Adopting Sorbet at Scale
ufuk
77
9.5k
Transcript
坐标系统与坐标变换 FEX 刘家鸣
坐标系统概述 • 原点 • 互相垂直的两条数轴 • ⾓角度定义
数学上 X(0°) Y(90°) 45° 坐标系统概述
屏幕上 X(0°) Y(90°) 45° 坐标系统概述
视野与世界 • 世界是⽆无穷⼤大的 • 视野是观察世界的⼀一个矩形区域 • 坐标系在世界中
世界 视野
锤⼦子的故事
从前有⼀一个画家
他很擅⻓长画锤⼦子
有⼀一天他改⾏行当程序员
⽼老板说 “你用程序画一个锤子吧”
太简单了 x1 y1 h1 x2 y2 h2 w1 w2 X
Y
⽼老板⼜又说 “锤子往右挪100像素吧”
没问题 x1 y1 h1 x2 y2 h2 w1 w2 X
Y
没问题 x1 + 100 y1 h1 x2 + 100 y2
h2 w1 w2 X Y
? ? ?
⾃自⾝身坐标系和参考坐标系 • 为图形复合⽽而⽣生的机制 • 只在⾼高层绘图技术中⽀支持(如SVG、VML) • 定义 • 区别
定义 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]); ⾃自⾝身坐标系和参考坐标系
区别 OC OB OA ⾃自⾝身坐标系和参考坐标系 1. 产⽣生的场景不同 ⾃自⾝身坐标系:与⽣生俱来 参考坐标系:在从属关系中 2.
数量不同 ⾃自⾝身坐标系:有且仅有 1 个 参考坐标系:可以有 n 个 3. 使⽤用的⺫⽬目的不同 ⾃自⾝身坐标系:为了定义图形 参考坐标系:为了观察图形 Live Example
坐标变换 • 定义 • 线性变换 • 线性变换列表 • 前驱坐标系与图形的变换矩阵
定义 • 数学上,「坐标变换」 是采⽤用⼀一定的数学⽅方法 将⼀一个坐标系的坐标变 换为另⼀一个坐标系的坐 标的过程。 • 2D 绘图中,「坐标变
换」是对⼀一个坐标系到 另⼀一个坐标系的变换的 描述 坐标变换 OC OB OA
线性变换 坐标变换 • 线性变换公式 X’ = aX + cY +
e Y’ = bX + dY + f • 变换矩阵,记为 M a c e b d f 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥
线性变换 • 线性变换公式 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 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥
平移 OA OB 线性变换 1 0 10 0 1 10
0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥
旋转 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 ⎧ ⎨ ⎪ ⎩ ⎪
旋转 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 ⎧ ⎨ ⎪ ⎩ ⎪
缩放 OA 线性变换 • a 和 c 直观控制缩放 OB
缩放 OA 线性变换 • a 和 c 直观控制缩放 OB 2
0 0 0 2 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥
变换列表 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
变换列表 OA 线性变换 • 表⽰示⼀一系列的变换,结 果为变换的矩阵的乘积 O B M =
Mn · Mn-1 · ... · M2 · M1 · M0 • 后⾯面的变换乘在前⾯面 O C Mtranslate · Mrotate Mrotate · Mtranslate • 顺序影响结果
前驱坐标系和图形的变换矩阵 线性变换 • 前驱坐标系:⽗父容器的坐标系 • 图形的变换矩阵M:⾃自⾝身坐标系到前驱坐标系的变换 • 变换的效果会叠加
前驱坐标系和图形的变换矩阵 线性变换 OB OA
前驱坐标系和图形的变换矩阵 线性变换 OB OA MA 1. 设置A的变换矩阵MA
OC 前驱坐标系和图形的变换矩阵 线性变换 OB OA MA 1. 设置A的变换矩阵MA 2. 把B放置在C中
前驱坐标系和图形的变换矩阵 线性变换 1. 设置A的变换矩阵MA 2. 把B放置在C中 3. 设置B的变换矩阵MB OC O
B O A M A MB 此时,OA 到OC 的变换为: MB·MA
Q&A