坐标系的转换

如下图，我们会有下面的需求，在坐标系1中，绘出一个图像， 这个图形自身的坐标系是2， 它里面又绘出了3个图形自身坐标系的一些东西。

这个变化过程如下图， 通过一个个的仿射变换矩阵完成变化。

 

一些相关基础知识：

矩阵乘法

2*2 矩阵 互相乘

 

 

 

参考：
http://taop.marchtea.com/02.08.html

简单来说，第一个矩阵取行， 第二个矩阵取列， 然后交叉相乘的和。

 

 

三角函数

常见三角函数的值：

 

平面直角坐标系及其变换

自身坐标系与参考坐标系

在一部分计算机 2D 绘图技术中，每个绘图元素会有自己的一个坐标系，称为「自身坐标系」。当图形 A 放作为图形 B 的一个元素的时候，可以把图形 B 的自身坐标系作为图形 A 的参考坐标系。

这个矩阵称为「二维线性变换矩阵」，记为 M。

矩阵的默认值如下， 该取值时是无变换的。因为  X` = X        Y`=Y

参考： 2D 绘图技术中的坐标系统与坐标变换
http://fex.baidu.com/blog/2014/05/coordinate-and-transform/

 

 

 

而坐标转换的矩阵我们一般如下（下面来自Windows的 GDI+ 编程的资料）：

 

 

类似的在 HTML5 的 Canvas 接口文档中也有类似的，如下图：

HTML5 mozilla Canvas API Transform 相关资料
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations

 

 

参考：

坐标系统与坐标变换 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://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

 

组合的坐标系变化例子：

参考：

https://www.cs.auckland.ac.nz/courses/compsci773s1c/lectures/ImageProcessing-html/topic2.htm