坐标系的转换
2016-02-25 08:28
302 查看
如下图,我们会有下面的需求,在坐标系1中,绘出一个图像, 这个图形自身的坐标系是2, 它里面又绘出了3个图形自身坐标系的一些东西。
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082711115-290571479.png)
这个变化过程如下图, 通过一个个的仿射变换矩阵完成变化。
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082712083-2103257794.png)
一些相关基础知识:
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082713240-1146774004.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082714271-1154730541.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082715115-1949713336.png)
参考:
http://taop.marchtea.com/02.08.html
简单来说,第一个矩阵取行, 第二个矩阵取列, 然后交叉相乘的和。
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082716083-483873155.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082717599-393943837.png)
常见三角函数的值:
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082718771-580701807.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082719896-601516782.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082720849-1124071377.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082721677-917273425.png)
这个矩阵称为「二维线性变换矩阵」,记为 M。
矩阵的默认值如下, 该取值时是无变换的。因为 X` = X Y`=Y
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082722490-1747074491.png)
参考: 2D 绘图技术中的坐标系统与坐标变换
http://fex.baidu.com/blog/2014/05/coordinate-and-transform/
而坐标转换的矩阵我们一般如下(下面来自Windows的 GDI+ 编程的资料):
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082723286-202773746.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082724318-71849610.png)
类似的在 HTML5 的 Canvas 接口文档中也有类似的,如下图:
HTML5 mozilla Canvas API Transform 相关资料
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082725271-183421198.png)
参考:
坐标系统与坐标变换 PPT
https://speakerdeck.com/baidufe/2d-hui-tu-zhong-de-zuo-biao-xi-tong-he-zuo-biao-bian-huan
SVG中的坐标系统和坐标变换
https://segmentfault.com/a/1190000004320934
http://blog.sina.com.cn/s/blog_5f38c0560100uzrj.html
https://segmentfault.com/a/1190000004469449
JDK 1.2 版本中就有类似的方法
参考: http://udn.yyuap.com/doc/jdk6-api-zh/java/awt/geom/AffineTransform.html
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082726177-1028777139.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082727083-211572529.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082727927-1962124859.png)
参考:
http://stackoverflow.com/questions/21503595/what-are-the-maths-behind-3d-billboard-sprites-was-3d-transformation-matrix-t
https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/CocoaDrawingGuide/Transforms/Transforms.html
组合的坐标系变化例子:
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082729474-1994872167.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082731505-1096137334.png)
参考:
https://www.cs.auckland.ac.nz/courses/compsci773s1c/lectures/ImageProcessing-html/topic2.htm
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082711115-290571479.png)
这个变化过程如下图, 通过一个个的仿射变换矩阵完成变化。
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082712083-2103257794.png)
一些相关基础知识:
矩阵乘法
2*2 矩阵 互相乘![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082713240-1146774004.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082714271-1154730541.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082715115-1949713336.png)
参考:
http://taop.marchtea.com/02.08.html
简单来说,第一个矩阵取行, 第二个矩阵取列, 然后交叉相乘的和。
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082716083-483873155.png)
三角函数
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082717599-393943837.png)
常见三角函数的值:
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082718771-580701807.png)
平面直角坐标系及其变换
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082719896-601516782.png)
自身坐标系与参考坐标系
在一部分计算机 2D 绘图技术中,每个绘图元素会有自己的一个坐标系,称为「自身坐标系」。当图形 A 放作为图形 B 的一个元素的时候,可以把图形 B 的自身坐标系作为图形 A 的参考坐标系。![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082720849-1124071377.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082721677-917273425.png)
这个矩阵称为「二维线性变换矩阵」,记为 M。
矩阵的默认值如下, 该取值时是无变换的。因为 X` = X Y`=Y
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082722490-1747074491.png)
参考: 2D 绘图技术中的坐标系统与坐标变换
http://fex.baidu.com/blog/2014/05/coordinate-and-transform/
而坐标转换的矩阵我们一般如下(下面来自Windows的 GDI+ 编程的资料):
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082723286-202773746.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082724318-71849610.png)
类似的在 HTML5 的 Canvas 接口文档中也有类似的,如下图:
HTML5 mozilla Canvas API Transform 相关资料
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082725271-183421198.png)
参考:
坐标系统与坐标变换 PPT
https://speakerdeck.com/baidufe/2d-hui-tu-zhong-de-zuo-biao-xi-tong-he-zuo-biao-bian-huan
SVG中的坐标系统和坐标变换
https://segmentfault.com/a/1190000004320934
http://blog.sina.com.cn/s/blog_5f38c0560100uzrj.html
https://segmentfault.com/a/1190000004469449
JDK 1.2 版本中就有类似的方法
参考: http://udn.yyuap.com/doc/jdk6-api-zh/java/awt/geom/AffineTransform.html
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082726177-1028777139.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082727083-211572529.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082727927-1962124859.png)
参考:
http://stackoverflow.com/questions/21503595/what-are-the-maths-behind-3d-billboard-sprites-was-3d-transformation-matrix-t
https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/CocoaDrawingGuide/Transforms/Transforms.html
组合的坐标系变化例子:
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082729474-1994872167.png)
![](http://images2015.cnblogs.com/blog/120296/201602/120296-20160225082731505-1096137334.png)
参考:
https://www.cs.auckland.ac.nz/courses/compsci773s1c/lectures/ImageProcessing-html/topic2.htm
相关文章推荐
- HD7 使用点滴
- 语法分析器(java)
- [Regionals 2012 :: Asia - Tokyo ]
- Phone 7编程点滴
- C#连接MySQL数据库的几点注意
- 【BZOJ 1090】[SCOI2003]字符串折叠
- TypeScript Interface(接口)
- NS2下实现一个无线网络广播包的大致流程
- 黑马程序员-----------浅谈多线程
- JSP自定义标签继承哪个类
- lintcode-easy-Identical Binary Tree
- Cygwin 安装
- 【BZOJ1026】[SCOI2009]windy数【数位DP】
- VMware Playerでの仮想マシン起動エラー
- 【BZOJ 1068】[SCOI2007]压缩
- ZipInputStream的用法
- Narrow Art Gallery
- 4318: OSU! 概率与期望DP
- lintcode-easy-Hash Function
- 触发器_mysql