iOS基礎 - Quartz 2D繪圖

1、Quartz 2D

Quartz 2D是一個二維圖形繪製引擎，支持iOS環境和Mac OS X環境。

Quartz 2D以PDF的規範爲基礎的圖形庫，用來繪製二維文字和圖形，容許相同的繪圖指令在任何裝置上，使用能夠獲得的最佳分辨率，產生相同的輸出

Quartz 2D API能夠實現許多功能，如基於路徑的繪圖、透明度、陰影、顏色管理、反鋸齒、PDF文檔生成和PDF元數據訪問等

Quartz 2D API是Core Graphics框架的一部分，所以其中的不少數據類型和方法都是以CG開頭的。會常常見到Quartz 2D（Quartz）和Core Graphics兩個術語交互使用

Quartz 2D與分辨率和設備無關，所以在使用Quartz 2D繪圖時，無需考慮最終繪圖的目標設備

2、圖形 vs 圖像

概念

圖形：以路徑的方式描述的一個形狀，在應用程序運行時，實時繪製（渲染/Rending）的形狀

圖像：是以二進制數據的形式描述的一塊像素點陣，在應用程序運行時，直接將該像素點陣逐一繪製在屏幕上

對比

圖像：能夠藉助第三方工具，如PhotoShop、Adobe Illustrator等預先繪製並以文件的形式保存，可以在應用程序中顯示很是炫麗的圖片

圖形：須要經過代碼繪製路徑的方式實現，若是要繪製比較華麗的圖像，須要很是複雜的算法，可是在繪製簡單形狀時，其速度和性能要遠遠高於圖像

在應用程序開發時，界面UI上常常會須要使用簡單的形狀或色塊加以點綴。另外，隨着iOS 7的扁平化設計理念的普及，原有的擬物化的圖片將會被愈來愈多的圖形替代！

爲了提升程序的視覺效果及性能，蘋果官方建議使用PNG格式的圖像

若是是使用AI等矢量軟件繪製的圖形，在輸出圖像時，最好針對須要的分辨率從新渲染

3、Core Graphics

Core Graphic框架是一組基於C的API，能夠用於一切繪圖操做，這個框架的重要性，僅次於UIKit和Foundation

當使用UIKit建立按鈕、標籤或者其餘UIView的子類時，UIKit會用Core Graphics將這些元素繪製在屏幕上。此外，UIEvent（UIKit中的事件處理類）也會使用Core Graphics，用來幫助肯定觸摸事件在屏幕上所處的位置

由於UIKit依賴於Core Graphics，因此當引入<UIKit/Uikit.h>時，Core Graphics框架會被自動引入，即UIKit內部已經引入了Core Graphics框架的主頭文件：<CoreGraphics/CoreGraphics.h>

爲了讓開發者沒必要觸及底層的Core Graphics的C接口，UIKit內部封裝了Core Graphics的一些API，能夠快速生成通用的界面元素。可是，有時候直接利用Core Graphics的C接口是頗有必要和頗有好處的，好比建立一個自定義的界面元素

4、Quartz 2D的幾個重要概念

在哪裏繪圖？

圖形上下文（Graphics Context）

如何繪圖？

Quartz 2D座標系

繪圖順序

UIView的drawRect:方法

Quartz 2D的內存管理

5、圖形上下文（Graphics Context）

Graphics Context是一個數據類型(CGContextRef)，封裝了Quartz繪製圖像到輸出設備的信息。輸出設備能夠是PDF文件、Bitmap或者顯示器的窗口上

Quartz中全部的對象都是繪製到一個Graphics Context中

當用Quartz繪圖時，全部設備相關的特性都包含在Graphics Context中。換句話說，咱們能夠簡單地給Quartz繪圖序列指定不一樣的Graphics Context，就可將相同的圖像繪製到不一樣的設備上。而不須要任何設備相關的計算，這些都由Quartz替咱們完成

Quartz提供瞭如下幾種類型的Graphics Context：

Bitmap Graphics Context

PDF Graphics Context

Window Graphics Context

Layer Graphics Context

Printer Graphics Context

一個Graphics Context表示一個繪製目標。它包含繪製系統用於完成繪製指令的繪製參數和設備相關信息

Graphics Context定義了基本的繪製屬性，如顏色、裁減區域、線條寬度和樣式信息、字體信息、混合模式等

在iOS應用程序中，若是要在屏幕上進行繪製，須要建立一個UIView對象，並實現它的drawRect:方法。視圖的drawRect:方法在視圖顯示在屏幕上及它的內容須要更新時被調用

在調用自定義的drawRect:後，視圖對象自動配置繪圖環境以便能當即執行繪圖操做

做爲配置的一部分，視圖對象將爲當前的繪圖環境建立一個Graphics Context。經過調用UIGraphicsGetCurrentContext()方法能夠獲取當前的Graphics Context

6、Quartz 2D座標系

Quartz中默認的座標系統是：原點(0, 0)在左下角。沿着X軸從左到右座標值逐漸增大；沿着Y軸從下到上座標值逐漸增大

有一些技術在設置它們的graphics context時使用了不一樣於Quartz的默認座標系統。最多見的一種修改的座標系統是原點位於左上角，而沿着Y軸從上到下座標值逐漸增大。例如：UIView中的UIGraphicsGetCurrentContext方法返回的圖形上下文就是用的是這種座標系

7、UIKit的座標系

原點(0,0)在屏幕的左上角，X軸向右正向延伸，Y軸向下正向延伸

iOS的像素分辨率會隨設備的硬件而變化，iPhone4第一次引入了視網膜屏幕，像素分辨率爲960 * 640，恰好是前一代iPod和iPhone像素分辨率（ 480 * 320）的兩倍

在繪圖時，須要使用「點」的概念來思考問題，而不是像素。也就是說在點座標系中繪圖，不是硬件的像素座標系

雖然這些設備的像素分辨率不一樣，但用到的座標系保持不變(以點爲單位)。在iPhone4上，一個點會用2像素寬度來繪製

提示：若是繪圖的上下文，是使用UIGraphicsGetCurrentContext或者其餘以UI開頭的方法獲取到的，在繪圖時無需進行座標轉換

8、Quartz 2D座標系——座標系的轉換

CGContextRotateCTM(CGContextRef c, CGFloat angle)方法能夠相對原點旋轉上下文座標系

CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty)方法能夠相對原點平移上下文座標系

CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy)方法能夠縮放上下文座標系

注意：

轉換座標系前，使用CGContextSaveGState(CGContextRef c)保存當前上下文狀態

座標系轉換後，使用CGContextRestoreGState(CGContextRef c)能夠恢復以前保存的上下文狀態

9、利用Quartz 2D繪製UIView

當在UIView子類中重寫drawRect:方法時，iOS會自動準備好一個圖形上下文，能夠經過調用UIGraphicsGetCurrentContext()來獲取

只要一個UIView須要被刷新或者重繪，drawRect:方法就會被調用，因此drawRect:的調用頻率很高

須要注意的是：重繪時應該調用setNeedsDisplay，而不能直接調用drawRect:，setNeedsDisplay會自動調用drawRect:

10、drawRect:注意事項

drawRect:是在UIViewController的loadView和viewDidLoad兩方法以後調用的

若是在UIView初始化時沒有設置CGRect，drawRect:將不會被自動調用

若是設置UIView的contentMode屬性值爲UIViewContentModeRedraw，那麼將在每次更改frame時自動調用drawRect:

若是使用UIView繪圖，只能在drawRect:方法中獲取相應的CGContextRef並繪圖。而在其餘方法中獲取的CGContextRef不能用於繪圖

11、Quartz內存管理

使用含有「Create」或「Copy」的函數建立的對象，使用完後必須釋放，不然將致使內存泄露

使用不含有「Create」或「Copy」的函數獲取的對象，則不須要釋放

若是retain了一個對象，再也不使用時，須要將其release掉。可使用Quartz 2D的函數來指定retain和release一個對象。例如，若是建立了一個CGColorSpace對象，則使用函數CGColorSpaceRetain和CGColorSpaceRelease來retain和release對象。也可使用Core Foundation的CFRetain和CFRelease。注意不能傳遞NULL值給這些函數

12、Quartz 2D繪圖的基本步驟

1. 獲取與視圖相關聯的上下文對象

UIGraphicsGetCurrentContext

2. 建立及設置路徑 （path）

2.1 建立路徑

2.2 設置路徑起點

2.3 增長路徑內容……

3. 將路徑添加到上下文 

4. 設置上下文屬性 

邊線顏色、填充顏色、線寬、線段鏈接樣式、線段首尾樣式、虛線樣式…

5. 繪製路徑

6. 釋放路徑

十3、Quartz 2D繪圖的基礎元素——路徑

路徑定義了一條或者或多條形狀或子路徑

子路徑能夠包含一條或者多條直線或曲線

子路徑也能夠是一些簡單的形狀，例如線、圓形、矩形或者星型等

子路徑還能夠包含複雜的形狀，例如地圖輪廓或者塗鴉等

路徑能夠是開放的，也能夠是封閉的；對於封閉路徑能夠空心的也能夠是實心的

十4、路徑的建立與繪製

路徑的建立和繪製是各自獨立的任務

能夠繪製空心路徑、實心路徑，或者即繪製路徑的邊線又填充路徑的內容

還能夠將路徑做爲剪切區域，用於將其餘對象的繪製約束在路徑的區域範圍以內

十5、iOS7中預約義的字符屬性

NSString *text = @「牀前明月光，疑是地上霜";

UIFont *font = [UIFont systemFontOfSize:18];

NSDictionary *dict = @{NSFontAttributeName: font};

CGRect rect = [text boundingRectWithSize:CGSizeMake(24, 1000) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil];

十6、線性漸變&徑向漸變

參數說明：

context: 上下文

gradient: 漸變

startCenter:  漸變開始的起始點座標

startRadius：漸變開始的起始點半徑，若是爲0，則從中心點開始發生漸變

endCenter：漸變結束的圓心座標，通常與起始點座標相同，也能夠略微變化，可是不要變得太遠，能夠調試看下效果

endRadius： 漸變結束圓的半徑

十7、生成添加水印的圖像

開始圖像上下文

繪製圖像

添加水印文字

獲取當前圖像上下文中的圖像結果

結束圖像繪製上下文

返回繪製圖像

十8、生成PDF文件

1. 建立PDF上下文

2. 新建PDF頁面，默認大小612 * 792

3. 結束PDF上下文

注意：

在處理PDF文件時，除了上下文以外，還須要考慮PDF的頁面大小