紀錄有關 ctx 與 bezierPath 做形變的心得， 最近正在龜速完善一直想要完成的自定義動畫模組， 過去僅在 layer 層做些操控， 或是一些很基礎的 ctx 操作， 實際想要做形變控制後踩了一個大坑。

• 參考官方文檔 懶得看官方文件可以先跳過。

閱讀此篇之前你需要會：

• 基本的UIKit 操作
• 子類化 UIView 的知識
• 自少知道 UIBezierPath 如何畫一條線或是矩形。
• UIBeziePath 官方文件

基本介紹

• CGContext：Quartz 2D 為基礎設計的上下文系統，簡單說就是一個很大的畫板，可以在上面做程式繪圖。（上下文：會因為你前後操作的順序，而影響結果）
• UIBezierPath：對 CGContext 打包後的模板工具，可以節省實際操作 CGContext時所需的細節。

座標系統

繪圖時總是需要做一些形狀位移或是旋轉縮放。 了解座標系統讓事情變得簡單。

Quartz 2D 概念裡有兩個座標系統，一個是用戶座標、一個是設備座標（UIKit)

• 用戶座標：就是ctx 本身座標，無法移動變更，就像是世界地圖的經緯度一樣。
• 設備座標：iOS 就是 UIKit 座標，想像你是遊戲玩家，透過螢幕(iPhone)觀察海上（用戶座標)的一艘船(UIKit 座標)，你可以任意更改那艘船的位子，但是你要確保船還在你的螢幕範圍。

或是參考下圖

形變 (座標轉換)