什么是Quartz2D？

Quartz 2D是一個(gè)二維圖形繪制引擎，支持iOS環(huán)境和Mac OS X環(huán)境。我們可以使用Quartz 2D API來實(shí)現(xiàn)許多功能，如基本路徑的繪制、透明度、描影、繪制陰影、透明層、顏色管理、反鋸齒、PDF文檔生成和PDF元數(shù)據(jù)訪問。在需要的時(shí)候，Quartz 2D還可以借助圖形硬件的功能。
在Mac OS X中，Quartz 2D可以與其它圖形圖像技術(shù)混合使用，如Core Image、Core Video、OpenGL、QuickTime。例如，通過使用 QuickTime的GraphicsImportCreateCGImage函數(shù)，可以用 Quartz從一個(gè) QuickTime圖形導(dǎo)入器中創(chuàng)建一個(gè)圖像。

1.Quartz 2D能完成的工作

繪制圖形 : 線條\三角形\矩形\圓\弧等
繪制文字
繪制\生成圖片(圖像)
讀取\生成PDF
截圖\裁剪圖片
自定義UI控件
涂鴉\畫板
手勢解鎖
… …

2.Quartz2D在iOS開發(fā)中的價(jià)值：

為了便于搭建美觀的UI界面，iOS提供了UIKit框架，里面有各種各樣的UI控件
UILabel：顯示文字
UIImageView：顯示圖片
UIButton：同時(shí)顯示圖片和文字（能點(diǎn)擊）
… …

利用UIKit框架提供的控件，拼拼湊湊，能搭建和現(xiàn)實(shí)一些簡單、常見的UI界面
但是，有些UI界面極其復(fù)雜、而且比較個(gè)性化，用普通的UI控件無法實(shí)現(xiàn)，這時(shí)可以利用Quartz2D技術(shù)將控件內(nèi)部的結(jié)構(gòu)畫出來，自定義控件的樣子
其實(shí)，iOS中大部分控件的內(nèi)容都是通過Quartz2D畫出來的
因此，Quartz2D在iOS開發(fā)中很重要的一個(gè)價(jià)值是：自定義view（自定義UI控件）

3.Quartz2D須知

Quartz2D的API是純C語言的

Quartz2D的API來自于Core Graphics框架
需要導(dǎo)入CoreGraphics.framework

數(shù)據(jù)類型和函數(shù)基本都以CG作為前綴
CGContextRef
CGPathRef
CGContextStrokePath(ctx);
……

圖形上下文

圖形上下文（Graphics Context）：是一個(gè)CGContextRef類型的數(shù)據(jù)

1.圖形上下文的作用:

• 保存繪圖信息、繪圖狀態(tài)
• 決定繪制的輸出目標(biāo)（繪制到什么地方去？）（輸出目標(biāo)可以是PDF文件、Bitmap或者顯示器的窗口上）
• 相同的一套繪圖序列，指定不同的Graphics Context，就可將相同的圖像繪制到不同的目標(biāo)上

Quartz2D提供了以下幾種類型的Graphics Context：

Bitmap Graphics Context
PDF Graphics Context
Window Graphics Context
Layer Graphics Context
Printer Graphics Context

自定義view

如何利用Quartz2D自定義view？（自定義UI控件）

如何利用Quartz2D繪制東西到view上？

首先，得有圖形上下文，因?yàn)樗鼙４胬L圖信息，并且決定著繪制到什么地方去
其次，那個(gè)圖形上下文必須跟view相關(guān)聯(lián)，才能將內(nèi)容繪制到view上面

自定義view的步驟

新建一個(gè)類，繼承自UIView
實(shí)現(xiàn)- (void)drawRect:(CGRect)rect方法，然后在這個(gè)方法中
取得跟當(dāng)前view相關(guān)聯(lián)的圖形上下文
繪制相應(yīng)的圖形內(nèi)容
利用圖形上下文將繪制的所有內(nèi)容渲染顯示到view上面

draw

為什么要實(shí)現(xiàn)drawRect:方法才能繪圖到view上？

因?yàn)樵赿rawRect:方法中才能取得跟view相關(guān)聯(lián)的圖形上下文

drawRect:方法在什么時(shí)候被調(diào)用？

當(dāng)view第一次顯示到屏幕上時(shí)（被加到UIWindow上顯示出來）
調(diào)用view的setNeedsDisplay或者setNeedsDisplayInRect:時(shí)

drawRect三部曲：

1.獲取上線文

2.繪制圖形

3.渲染

繪制線：

    // 1.取得和當(dāng)前視圖相關(guān)聯(lián)的圖形上下文(因?yàn)閳D形上下文決定繪制的輸出目標(biāo))/
    
    // 如果是在drawRect方法中調(diào)用UIGraphicsGetCurrentContext方法獲取出來的就是Layer的上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.繪圖(繪制直線), 保存繪圖信息
    // 設(shè)置起點(diǎn)
    CGContextMoveToPoint(ctx, 10, 100);
    // 設(shè)置終點(diǎn)
    CGContextAddLineToPoint(ctx, 100, 100);

    // 設(shè)置繪圖狀態(tài)
    // 設(shè)置線條顏色 紅色
    CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0);
    // 設(shè)置線條寬度
    CGContextSetLineWidth(ctx, 10);
    // 設(shè)置線條的起點(diǎn)和終點(diǎn)的樣式
    CGContextSetLineCap(ctx, kCGLineCapRound);
    // 設(shè)置線條的轉(zhuǎn)角的樣式
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    // 繪制一條空心的線
    CGContextStrokePath(ctx);
    
    /*------------------華麗的分割線---------------------*/
    
    // 重新設(shè)置第二條線的起點(diǎn)
    CGContextMoveToPoint(ctx, 150, 200);
    // 設(shè)置第二條直線的終點(diǎn)(自動把上一條直線的終點(diǎn)當(dāng)做起點(diǎn))
    CGContextAddLineToPoint(ctx, 100, 50);
    // 設(shè)置第二條線的顏色 綠色
    //    [[UIColor greenColor] set];
    CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);
    
    // 繪制圖形(渲染圖形到view上)
    // 繪制一條空心的線
    CGContextStrokePath(ctx);

繪制三角形:

// 1.獲取圖形上下文
CGContextRef ctx =  UIGraphicsGetCurrentContext();

// 2. 繪制三角形
// 設(shè)置起點(diǎn)
CGContextMoveToPoint(ctx, 100, 10);
// 設(shè)置第二個(gè)點(diǎn)
CGContextAddLineToPoint(ctx, 50, 100);
// 設(shè)置第三個(gè)點(diǎn)
CGContextAddLineToPoint(ctx, 150, 100);
// 設(shè)置終點(diǎn)
//    CGContextAddLineToPoint(ctx, 100, 10);
// 關(guān)閉起點(diǎn)和終點(diǎn)
CGContextClosePath(ctx);
// 3.渲染圖形到layer上
CGContextStrokePath(ctx);

繪制圓形：

    // 畫圓
    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.畫圓
    CGContextAddEllipseInRect(ctx, CGRectMake(50, 100, 50, 50));
    
    [[UIColor greenColor] set];
    
    // 3.渲染
    //    CGContextStrokePath(ctx);
    CGContextFillPath(ctx);

繪制矩形：

    // Drawing code
    // 繪制四邊形
    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.繪制四邊形
    CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));
    
    // 如果要設(shè)置繪圖的狀態(tài)必須在渲染之前
//    CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0);
    // 繪制什么類型的圖形(空心或者實(shí)心).就要通過什么類型的方法設(shè)置狀態(tài)
//    CGContextSetRGBFillColor(ctx, 1.0, 0, 0, 1.0);
    
    // 調(diào)用OC的方法設(shè)置繪圖的顏色
//    [[UIColor purpleColor] setFill];
//    [[UIColor blueColor] setStroke];
    // 調(diào)用OC的方法設(shè)置繪圖顏色(同時(shí)設(shè)置了實(shí)心和空心)
//    [[UIColor greenColor] set];
    [[UIColor colorWithRed:1.0 green:0 blue:0 alpha:1.0] set];
    
    // 3.渲染圖形到layer上
    CGContextStrokePath(ctx);
//    CGContextFillPath(ctx);

繪制圓?。?/h4>

// 畫圓弧
// 1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫圓弧
// x/y 圓心
// radius 半徑
// startAngle 開始的弧度
// endAngle 結(jié)束的弧度
// clockwise 畫圓弧的方向 (0 順時(shí)針, 1 逆時(shí)針)
//    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI_2, 0);
CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
CGContextClosePath(ctx);

// 3.渲染
//     CGContextStrokePath(ctx);
CGContextFillPath(ctx);

繪制餅圖

// 1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫餅狀圖
// 畫線
CGContextMoveToPoint(ctx, 100, 100);
CGContextAddLineToPoint(ctx, 100, 150);
// 畫圓弧
CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
//    CGContextAddArc(ctx, 100, 100, 50, -M_PI, M_PI_2, 1);

// 關(guān)閉路徑
CGContextClosePath(ctx);


// 3.渲染 (注意, 畫線只能通過空心來畫)
CGContextFillPath(ctx);
//    CGContextStrokePath(ctx);

參考資料：

黑馬教程第五期，高級UI-Quartz2D章節(jié)
http://blog.csdn.net/newjerryj/article/details/8181376
http://www.cocoachina.com/ios/20111111/3486.html