坐標系的轉換

如下圖，我們會有下面的需求，在坐標系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