來源： KenshinCui
概述
在iOS中可以很容易的開發出絢麗的界面效果，一方面得益于成功系統的設計，另一方面得益于它強大的開發架構。今天我們将圍繞iOS中兩大圖形、圖像繪圖架構進行介紹：Quartz 2D繪制2D圖形和Core Image中強大的濾鏡功能。
Quartz 2D
在iOS中常用的繪圖架構就是Quartz 2D，Quartz 2D是Core Graphics架構的一部分，是一個強大的二維圖像繪制引擎。Quartz 2D在UIKit中也有很好的封裝和內建，我們日常開發時所用到的UIKit中的元件都是由Core Graphics進行繪制的。不僅如此，當我們引入UIKit架構時系統會自動引入Core Graphics架構，并且為了友善開發者使用在UIKit内部還對一些常用的繪圖API進行了封裝。
在iOS中繪圖一般分為以下幾個步驟：
1.擷取繪圖上下文
2.建立并設定路徑
3.将路徑添加到上下文
4.設定上下文狀态
5.繪制路徑
6.釋放路徑
圖形上下文CGContextRef代表圖形輸出裝置（也就是繪制的位置），包含了繪制圖形的一些裝置資訊，Quartz 2D中的所有對象最終都必須繪制到圖形上下文。這樣一來，我們在繪制圖形時就不必關心具體的裝置資訊，統一了代碼編寫方式（在Quartz 2D中的繪圖上下文可以是位圖Bitmap、PDF、視窗Window、層Layer、列印對象Printer）。
基本圖形繪制
在UIKit中預設已經為我們準備好了一個圖形上下文對象，在UI控件的drawRect:方法（這個方法在loadView、viewDidLoad方法後執行）中我們可以通過UIKit封裝函數UIGraphicsGetCurrentContext()方法獲得這個圖形上下文(注意在其他UI控件方法中無法取得這個對象)，然後我們隻要按照繪圖步驟一步步執行即可。下面自定義一個KCView繼承自UIView，重寫drawRect:方法繪制兩條直線說明上面繪圖的步驟：
在視圖控制器建立KCView并添加到根視圖中：
簡化繪圖方式
上面的繪圖方式未免顯得有些麻煩，其實Core Graphics 内部對建立對象添加到上下文這兩步操作進行了封裝，可以一步完成。另外前面也說過UIKit内部其實封裝了一些以“UI”開頭的方法幫助大家進行圖形繪制。就拿前面的例子來說我們改進一些繪制方法：
上面的操作相比前面的方法應該說已經簡化了不少，除了路徑之外其他矩形、橢圓等都有對應的建立方法。另外上面我們也示範了封閉路徑的方法，大家可以運作看一下效果。
其他圖形繪制
相信大家了解了上面的繪制步驟其他圖形繪制并不麻煩，下面以一個例子簡單示範一下其他圖形的繪制，包括文字和圖像的繪制。
繪制矩形
在下面的方法中還可以看到UIKit對繪圖方法的封裝，使用起來更加簡單。
繪制橢圓
運作效果：
繪制弧形
繪制貝塞爾曲線
要繪制規則圖形在iOS中相當簡單，但是不規則圖形怎麼繪制呢？此時就要利用路徑。前面我們繪制了直線，它和曲線繪制都屬于路徑繪制。和直線繪制相比曲線繪制就要複雜一些，但是路徑作為進階動畫的基礎又是我們必須掌握的，是以這裡我們就一起來熟悉一下曲線繪制。在Quartz 2D中曲線繪制分為兩種：二次貝塞爾曲線和三次貝塞爾曲線。二次曲線隻有一個控制點，而三次曲線有兩個控制點，如下圖所示：
當然，在iOS中兩種曲線分别對應兩種方法：
CGContextAddQuadCurveToPoint(CGContextRef c, CGFloat cpx, CGFloat cpy, CGFloat x, CGFloat y);
CGContextAddCurveToPoint(context, CGFloat cp1x, CGFloat cp1y, CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y);
下面就示範一下這兩種曲線的繪制方法
備注:貝塞爾曲線是由法國數學家“貝塞爾”發現的，他發現：任何一條曲線都能夠由和它相切的直線的兩個端點來描述，這種曲線表示方式後來被廣泛應用到計算機中，稱為“貝塞爾曲線”。
文字繪制
除了繪制圖形還可以繪制文本内容。
圖像繪制
Quartz 2D還可以将圖像繪制到圖形上下文。
繪制漸變填充
從前面的示例中我們可以看到如何設定填充顔色，事實上很多時候純色的填充并不能滿足我們的需求，例如有時候我們要繪制一些圖形可能需要設定一個漂亮的背景，這個時候我們可能就會選擇漸變填充方式。Quartz 2D的漸變方式分為兩種：
a.線性漸變線：漸變色以直線方式從開始位置逐漸向結束位置漸變
b.徑向漸變：以中心點為圓心從起始漸變色向四周輻射，直到終止漸變色
要做漸變則必須先設定從開始位置到結束位置的漸變顔色，做過photoshop的朋友相信對于漸變色設定并不陌生，隻要在指定位置指定不同的顔色，剩下的事情交給系統處理即可，如下圖在起始位置、3/10位置、結束位置指定了三種顔色就形成由三種顔色組成的漸變色：
另外，在iOS中繪制漸變還需要注意一點就是指定顔色空間，所謂顔色空間就是不同顔色在不同的次元上取值最終組成一種顔色的過程。就拿RGB來說，如果将紅色、綠色、藍色看成是x、y、z軸坐标系，那麼在三個坐标上分别取0~255範圍内的不同值則可以組成各類顔色。當然，不同顔色空間的“坐标系”也是不同的（也就是說顔色表示的方式是不同的），常用的顔色空間除了RGB還有CMYK（印刷業常用這種顔色模式）、Gray。
在使用Quartz 2D繪圖時我們的顔色除了使用正常的方法（如何前面CGContextSetRGBFillColor(CGContextRef context, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)方法）設定RGB和透明度外，有時還會遇到顔色參數是一個數組情況。如使用顔色空間填充時用到的CGContextSetFillColor(CGContextRef context, const CGFloat *components)方法，這個時候components數組中具體是如何存儲顔色就要根據顔色空間而定，如果顔色空間使用RGB則數組中的元素四個為一組，分别是red（紅）、green（綠）、blue（藍）、alpha（透明度）；如果使用CMYK顔色空間，那麼數組中的元素五個為一組，分别是cyan（青）、magenta（洋紅）、yellow（黃）、black（黑）、alpha（透明度）。
下面的代碼分别示範了兩種漸變方式，具體漸變繪制函數參數代碼中已經注釋的很清楚了：
擴充–漸變填充
上面我們隻是繪制漸變到圖形上下文，實際開發中有時候我們還需要填充對應的漸變色，例如現在繪制了一個矩形，如何填充成漸變色呢？在此可以利用漸變裁切來完成（當然利用層CALayer更加友善但這不在今天的話題讨論範圍内），特别說明一下區域裁切并不僅僅适用于漸變填充，對于其他圖形繪制仍然适用，并且注意裁切隻能限于矩形裁切。
程式猿神奇的手，每時每刻，這雙手都在改變着世界的互動方式！
本文轉自當天真遇到現實部落格園部落格，原文連結：http://www.cnblogs.com/XYQ-208910/p/5291033.html，如需轉載請自行聯系原作者