Quartz2D是一個(gè)二維繪圖引擎，同時(shí)支持iOS和Mac系統(tǒng)
功能：

• 繪制圖形（線條、三角形、矩形、圓、弧等）
• 繪制文字
• 繪制\生成圖片
• 讀取\生成PDF
• 截圖\裁剪圖片
• 自定義UI控件

1.圖形上下文
相當(dāng)于現(xiàn)實(shí)中的畫板，是一個(gè)CGContextRef類型的數(shù)據(jù)
作用：
- 保存繪圖信息、繪圖狀態(tài)
- 決定繪制的輸出目標(biāo)
2.利用Quartz2D自定義view

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

3.自定義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上面

4.通常在drawRect:(CGRect)rect這個(gè)方法里面繪制圖形，只有在這個(gè)方法里面才能獲取到跟view的layer相關(guān)聯(lián)的圖形上下文，當(dāng)這個(gè)view要顯示的時(shí)候才會(huì)調(diào)用此方法繪制圖形，一般只調(diào)用一次

5.畫一條簡(jiǎn)單的線

• 方法一

// 注意：rect是當(dāng)前控件的bounds
- (void)drawRect:(CGRect)rect {
    // 1.獲取圖像上下文
    // 目前我們所用的上下文都是UIGraphics開(kāi)頭的
    // CGContextRef Ref:引用 CG：目前使用到的類型和函數(shù)一般都是CG開(kāi)頭 CoreGraphics
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.描述路徑
    // 創(chuàng)建路徑
    CGMutablePathRef path = CGPathCreateMutable();
    // 設(shè)置起點(diǎn)
    // path：給哪個(gè)路徑設(shè)置起點(diǎn)
    CGPathMoveToPoint(path, NULL, 50, 50);
    // 添加一根線到某個(gè)點(diǎn)
    CGPathAddLineToPoint(path, NULL, 200, 200);
    
    // 3.把路徑添加到上下文
    CGContextAddPath(ctx, path);
    
    // 4.渲染上下文
    CGContextStrokePath(ctx);
}

• 方法二

- (void)drawRect:(CGRect)rect {
    // 1.獲取圖像上下文
    // 目前我們所用的上下文都是UIGraphics開(kāi)頭的
    // CGContextRef Ref:引用 CG：目前使用到的類型和函數(shù)一般都是CG開(kāi)頭 CoreGraphics
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.描述路徑
    // 設(shè)置起點(diǎn)
    CGContextMoveToPoint(ctx, 50, 50);
    // 設(shè)置某個(gè)線從某個(gè)點(diǎn)(里面封裝了添加到上下文的代碼)
    CGContextAddLineToPoint(ctx, 200, 200);
    
    // 3.渲染上下文
    CGContextStrokePath(ctx);
}

• 方法三

- (void)drawRect:(CGRect)rect {
    // 貝瑟爾路徑
    // 創(chuàng)建路徑
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    // 設(shè)置起點(diǎn)
    [path moveToPoint:CGPointMake(50, 50)];
    
    // 添加一根線到某個(gè)點(diǎn)
    [path addLineToPoint:CGPointMake(200, 200)];
    
    // 繪制路徑
    [path stroke];
}

6.基本圖形繪制（形狀）
廢話不多說(shuō)，一樣的原理，直接上代碼

• 方法一

- (void)drawCtxState1
{
    // 獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 描述路徑
    CGContextMoveToPoint(ctx, 50, 50);
    
    CGContextAddLineToPoint(ctx, 100, 50);
    
    // 設(shè)置起點(diǎn)
    CGContextMoveToPoint(ctx, 80, 60);
    
    // 如果不重新設(shè)置起點(diǎn)，默認(rèn)下一根線的起點(diǎn)是上一根線的終點(diǎn)
    CGContextAddLineToPoint(ctx, 100, 200);
    
    // 設(shè)置繪圖狀態(tài), 一定要在渲染之前
    // 顏色
    [[UIColor greenColor] setStroke];
    // 線寬
    CGContextSetLineWidth(ctx, 5);
    // 設(shè)置連接樣式(kCGLineJoinRound 圓角， kCGLineJoinMiter直角， kCGLineJoinBevel正切 缺一個(gè)角)
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    // 設(shè)置頂角樣式
    CGContextSetLineCap(ctx, kCGLineCapRound);
    
    // 渲染上下文
    CGContextStrokePath(ctx);
}

• 方法二

- (void)drawCtxState2
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(200, 200)];
    path.lineWidth = 5;
    [[UIColor redColor] set];
    [path stroke];
    
    UIBezierPath *path1 = [UIBezierPath bezierPath];
    [path1 moveToPoint:CGPointMake(0, 0)];
    [path1 addLineToPoint:CGPointMake(30, 60)];
    [[UIColor greenColor] set];
    path1.lineWidth = 5;
    [path1 stroke];
}

7.繪制曲線

- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    // 如何繪制曲線
    // 原聲繪制方法
    
    // 獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 描述路徑
    // 設(shè)置起點(diǎn)
    CGContextMoveToPoint(ctx, 100, 100);
    // cpx：控制點(diǎn)的x  
    CGContextAddQuadCurveToPoint(ctx, 150, 50, 250, 50);
    
    // 渲染上下文
    CGContextStrokePath(ctx);
}

cpx：控制點(diǎn)的x 這個(gè)點(diǎn)就相當(dāng)于一條直線，拿住中點(diǎn)往任意方向拽，最后落下的那個(gè)點(diǎn)就是這個(gè)cpx 如果這樣說(shuō)還不懂的話，其實(shí)我也是沒(méi)有辦法?? （配合下面的圖一起理解，如果還是不懂，可以留言給我）

Paste_Image.png

8.圓角矩形

- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    // 圓角矩形
//    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 200, 200) cornerRadius:10];
  
    [path stroke];
    // 填充：必須是一個(gè)完整的封閉路徑, 默認(rèn)會(huì)自動(dòng)關(guān)閉路徑
//    [path fill];
   
}

9.圓弧&扇形

- (void)drawRect:(CGRect)rect {
    // Drawing code

    // 圓弧
    // center:圓心
    // startAngle：弧度 M_PI:180度 clockwise:yes是順時(shí)針 no逆時(shí)針
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 250) radius:100 startAngle:0 endAngle:M_PI * 2 clockwise:YES];

    [[UIColor purpleColor] set];
    
    // 扇形
    CGPoint center = CGPointMake(150, 250);
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
    // 添加一根線到圓心
    [path addLineToPoint:center];
    // 封閉路徑，關(guān)閉路徑，從路徑的終點(diǎn)到起點(diǎn)
    [path closePath];
    
    [path stroke];
    // 填充：必須是一個(gè)完整的封閉路徑, 默認(rèn)會(huì)自動(dòng)關(guān)閉路徑
//    [path fill];

}

掌握了以上的基礎(chǔ)畫法，就可以畫出餅圖， 柱形圖，加載框等效果。

根據(jù)進(jìn)度條控制加載的數(shù)據(jù)

Paste_Image.png

餅圖

Paste_Image.png

10.繪制文字

- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    // 繪制文字
    NSString *str = @"louise";
    
    // 文字的起點(diǎn)
    // Attributes 文本屬性
    
    NSMutableDictionary *textDic = [NSMutableDictionary dictionary];
    
    // 設(shè)置文字顏色等屬性
    textDic[NSForegroundColorAttributeName] = [UIColor redColor];
    textDic[NSFontAttributeName] = [UIFont systemFontOfSize:50];
    
    // 設(shè)置文字的空心顏色和寬度
    textDic[NSStrokeWidthAttributeName] = @3;
    textDic[NSStrokeColorAttributeName] = [UIColor yellowColor];
    
    // 創(chuàng)建陰影對(duì)象
    NSShadow *shadow = [[NSShadow alloc] init];
    shadow.shadowColor = [UIColor purpleColor];
    shadow.shadowOffset = CGSizeMake(10, 10);
    shadow.shadowBlurRadius = 5;
    textDic[NSShadowAttributeName] = shadow;
    
    // 富文本，給普通的文字添加顏色，字體大小
    [str drawAtPoint:CGPointZero withAttributes:textDic];
    
    
}