簡(jiǎn)述：

• 1、Quartz2D是什么

  • Quartz2D是二維繪圖引擎，同時(shí)支持IOS和Mac

• 2、Quartz2D能做什么

• 1、繪制圖形：線條\三角形\矩形\圓\弧等

• 2、繪制文字

• 3、繪制\生成圖片(常用)

• 4、截圖\裁剪圖片(常用)

• 5、讀取\生成PDF(不常用)

• 6、自定義UI控件(不常用)

• 3、Quartz2D操作流程

• 3.1、看完上面的，我想大家應(yīng)該知道Quartz2D是用來(lái)干什么的了吧，但是我們又該如何操作它來(lái)完成自己想完成的繪制呢，那么需要使用它，我們的知道它的一個(gè)流程:

   1、我們首先需要開(kāi)啟圖形上下文（Graphics Context）：是一個(gè)CGContextRef類型的數(shù)據(jù)。
   2、然后對(duì)我們想繪制的圖片或者圖形進(jìn)行一系列的操作。
   3、最后就是渲染在我的View上面。
  

• 3.2、那么知道流程之后，我們?cè)诳纯词裁词巧舷挛乃志哂惺裁醋饔茫?/p>

   1、介紹：
       1、在上面已經(jīng)介紹Graphics Context是一個(gè)CGContextRef類型的數(shù)據(jù)，但是那為什么是已CG開(kāi)頭呢，
          是因?yàn)镼uartz2D的API來(lái)自于Core Graphics框架，數(shù)據(jù)類型和函數(shù)基本都以CG作為前綴。
   2、作用：
       1、它保存繪圖信息、繪圖狀態(tài)
       2、決定繪制的輸出目標(biāo)(繪制到什么地?去?) (輸出目標(biāo)可以是PDF?文件、Bitmap或者顯示器的窗口上)
  

• 3.3、在Quartz2D提供了以下幾種類型的Graphics Context：

   Bitmap Graphics Context     位圖上下文
   PDF Graphics Context        PDF上下文
   Window Graphics Context     窗口上下文
   Layer Graphics Context      Layer上下文
   Printer Graphics Context    打印機(jī)上下文
  

  如果想深入了解的話，大家可以去看看官方文檔，如何英文和我一樣的話我建議大家去看看南峰子的技術(shù)博客,我覺(jué)得此大神英文真心讓我膜拜啊。

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

   1、首先，得有圖形上下文，因?yàn)樗鼙４胬L圖信息，并且決定著繪制到什么地方去
   2、其次，那個(gè)圖形上下文必須跟view相關(guān)聯(lián)，才能將內(nèi)容繪制到view上面
   3、實(shí)現(xiàn)關(guān)聯(lián)的話，需要?jiǎng)?chuàng)建一個(gè)類，并且繼承于UIView，最重要的是要實(shí)現(xiàn)- (void)drawRect:(CGRect)rect這個(gè)方法
  
   其實(shí)說(shuō)了那么多廢話都是想說(shuō)- (void)drawRect:(CGRect)rect而已，好咯，那就開(kāi)始摟代碼吧
  

代碼：

繪制圖形(線條\三角形\矩形\圓\弧\餅圖)：

• 1、線條

• 第一種

  - (void)drawRect:(CGRect)rect {
      //1、獲取上下文
      CGContextRef ctx = UIGraphicsGetCurrentContext();
  
      //2、設(shè)置開(kāi)始畫(huà)線的點(diǎn)
      CGContextMoveToPoint(ctx, 20, 100);
  
      //3、設(shè)置結(jié)束畫(huà)線的點(diǎn)
      CGContextAddLineToPoint(ctx, 200, 100);
  
      //4、設(shè)置線條的寬度
      CGContextSetLineWidth(ctx, 5);
  
      //5、設(shè)置線條起點(diǎn)和終點(diǎn)的樣式為圓角
      CGContextSetLineCap(ctx, kCGLineCapRound);
  
      //6、設(shè)置線條的轉(zhuǎn)角的樣式為圓角
      CGContextSetLineJoin(ctx, kCGLineJoinRound);
  
      //7、設(shè)置繪圖的顏色
      [[UIColor redColor] set];
  
      //8設(shè)置第二條線的終點(diǎn)(自動(dòng)把上一條直線的終點(diǎn)當(dāng)做起點(diǎn))
      // CGContextAddLineToPoint(ctx, 300, 200);
  
      //9.渲染（繪制出一條空心的線，線條不能為實(shí)心，只有圖型可為實(shí)心）
      CGContextStrokePath(ctx);
      //CGContextFillPath(ctx);
  }
  

• 第二種(使用了貝塞爾路徑)

  - (void)drawRect:(CGRect)rect {
      //1、獲取上下文
      CGContextRef ctx = UIGraphicsGetCurrentContext();
  
      //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會(huì)路徑  UIBezierPath是UIKit中的
      UIBezierPath *path = [UIBezierPath bezierPath];
  
      //3、設(shè)置開(kāi)始畫(huà)線的點(diǎn)
      [path moveToPoint:CGPointMake(50, 50)];
  
      //4、設(shè)置結(jié)束畫(huà)線的點(diǎn)
      [path addLineToPoint:CGPointMake(200, 200)];
  
      //5、給上下文添加路徑
      CGContextAddPath(ctx, path.CGPath);
  
      //繪制第二根線  這里我就不寫注釋了 和上面一樣
      path = [UIBezierPath bezierPath];
      [path moveToPoint:CGPointMake(200, 200)];
      [path addLineToPoint:CGPointMake(100, 200)];
      CGContextAddPath(ctx, path.CGPath);
  
      //6.渲染（繪制出一條空心的線，線條不能為實(shí)心，只有圖型可為實(shí)心）
      CGContextStrokePath(ctx);
      //如果大家想設(shè)置顏色，寬度，圓角狀態(tài)的話 可參考上面的，因?yàn)槎际且粯拥?}
  

  后面的話我都是使用貝塞爾路徑來(lái)實(shí)現(xiàn)繪圖，因?yàn)樗褂闷饋?lái)比較方便,易閱讀 ,善于管理,不像上面那種閱讀起來(lái)比較麻煩，如果有很多繪圖信息,老長(zhǎng)老長(zhǎng)的;

• 2、三角形

  - (void)drawRect:(CGRect)rect {
      //1、獲取上下文
      CGContextRef ctx = UIGraphicsGetCurrentContext();
  
      //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會(huì)路徑  UIBezierPath是UIKit中的
      UIBezierPath *path = [UIBezierPath bezierPath];
  
      //3、設(shè)置開(kāi)始畫(huà)線的點(diǎn)
      [path moveToPoint:CGPointMake(50, 50)];
  
      //4、設(shè)置結(jié)束畫(huà)線的點(diǎn)  另外在添加了兩個(gè)點(diǎn) 最后回到最初的點(diǎn)  那么三角形就構(gòu)成了
      [path addLineToPoint:CGPointMake(200, 200)];
  
      [path addLineToPoint:CGPointMake(100, 200)];
  
      [path addLineToPoint:CGPointMake(50, 50)];
      //5、給上下文添加路徑
      CGContextAddPath(ctx, path.CGPath);
  
      //6.渲染（繪制出一條空心的線，線條不能為實(shí)心，只有圖型可為實(shí)心）
      //CGContextStrokePath(ctx);   空心
      CGContextFillPath(ctx);  //實(shí)心
  }
  

• 3、矩形

  - (void)drawRect:(CGRect)rect {
      //1、獲取上下文
      CGContextRef ctx = UIGraphicsGetCurrentContext();
  
      //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會(huì)路徑  UIBezierPath是UIKit中的
      UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 100)];
  
      //3、給上下文添加路徑
      CGContextAddPath(ctx, path.CGPath);
      //4.渲染（繪制出一條空心的線，線條不能為實(shí)心，只有圖型可為實(shí)心）
      //    CGContextStrokePath(ctx);   空心
      CGContextFillPath(ctx);  //實(shí)心
  }
  

• 4、圓形

   //---------------------------第一種-----------------------------
  //通過(guò)矩形改變cornerRadius畫(huà)圓  也可以畫(huà)圓角的矩形
  - (void)drawRect:(CGRect)rect {
      //1、獲取上下文
      CGContextRef ctx = UIGraphicsGetCurrentContext();
  
      //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會(huì)路徑  UIBezierPath是UIKit中的
      UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 100, 100) cornerRadius:50];
  
      //3、給上下文添加路徑
      CGContextAddPath(ctx, path.CGPath);
      //4.渲染（繪制出一條空心的線，線條不能為實(shí)心，只有圖型可為實(shí)心）
      //    CGContextStrokePath(ctx);   空心
      CGContextFillPath(ctx);  //實(shí)心
  }
  //---------------------------第二種-----------------------------
  //畫(huà)圓形以及橢圓  寬度和高度一樣則是圓形 不一樣則是橢圓
  - (void)drawRect:(CGRect)rect {
      //1、獲取上下文
      CGContextRef ctx = UIGraphicsGetCurrentContext();
  
      //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會(huì)路徑  UIBezierPath是UIKit中的
      UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 50, 100)];
  
      //3、給上下文添加路徑
      CGContextAddPath(ctx, path.CGPath);
      //4.渲染（繪制出一條空心的線，線條不能為實(shí)心，只有圖型可為實(shí)心）
      //    CGContextStrokePath(ctx);   空心
      CGContextFillPath(ctx);  //實(shí)心
  }
  

• 5、弧形

  - (void)drawRect:(CGRect)rect {
  //1、獲取上下文
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  
  //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會(huì)路徑  UIBezierPath是UIKit中的
  
  //為UIView的中心點(diǎn)
  CGPoint center =   CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
  CGFloat radius = 50;
  //center       圓心
  //radius       半徑
  //startAngle   開(kāi)始角度
  //endAngle     結(jié)束角度
  //clockwise    Yes為順時(shí)針  NO為逆勢(shì)針
  UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:M_PI_2 clockwise:YES];
  
  //3、給上下文添加路徑
  CGContextAddPath(ctx, path.CGPath);
  //4.渲染（繪制出一條空心的線，線條不能為實(shí)心，只有圖型可為實(shí)心）
  CGContextStrokePath(ctx);//   空心
  //    CGContextFillPath(ctx);  實(shí)心
  

}
```

• 6、餅圖

  其實(shí)餅圖就是在弧的兩端以及和中心點(diǎn)加了兩條線，成為了餅圖

  - (void)drawRect:(CGRect)rect {
      //1、獲取上下文
      CGContextRef ctx = UIGraphicsGetCurrentContext();
  
      //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會(huì)路徑  UIBezierPath是UIKit中的
  
      //為UIView的中心點(diǎn)
      CGPoint center =   CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
      CGFloat radius = 50;
      //center       圓心
      //radius       半徑
      //startAngle   開(kāi)始角度
      //endAngle     結(jié)束角度
      //clockwise    Yes為順時(shí)針  NO為逆勢(shì)針
      UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:M_PI_2 clockwise:YES];
  
      //上面代碼為給路徑添加了一條弧，現(xiàn)在我們?cè)诨〉膬啥艘约昂椭行狞c(diǎn)加了兩條線  為餅圖
      //這里的話  我們之間添加到坐標(biāo)點(diǎn)為中心
      [path addLineToPoint:center];
      //這里直接閉合路徑  則一條餅圖的路徑就添加完成了
      [path closePath];
  
      //3、給上下文添加路徑
      CGContextAddPath(ctx, path.CGPath);
  
      //4.渲染（繪制出一條空心的線，線條不能為實(shí)心，只有圖型可為實(shí)心）
      CGContextStrokePath(ctx);//   空心
      //    CGContextFillPath(ctx);  實(shí)心
  }
  

補(bǔ)充：

以上就是通過(guò)貝塞爾路徑畫(huà)的圖了，里面的話只要就是需要查看UIBezierPath中的一些方法，忘了看看就行，如果有喜歡直接用上下文去畫(huà)的朋友可以去看iOS-Quartz2D這位朋友寫的博客。

                    本章到此結(jié)束
            歡迎各位碼友隨意轉(zhuǎn)載并指正