iOS繪圖—— UIBezierPath 和 Core Graphics

前言

iOS系統自己提供了兩套繪圖的框架，即UIBezierPath 和 Core Graphics。而前者所屬UIKit，實際上是對Core Graphics框架關於path的進一步封裝，因此使用起來比較簡單。可是畢竟Core Graphics更接近底層，因此它更增強大。

UIBezierPath

能夠建立基於矢量的路徑，例如橢圓或者矩形，或者有多個直線和曲線段組成的形狀。

使用UIBezierPath，你只能在當前上下文中繪圖，因此若是你當前處於UIGraphicsBeginImageContextWithOptions函數或drawRect：方法中，你就能夠直接使用UIKit提供的方法進行繪圖。若是你持有一個context：參數，那麼使用UIKit提供的方法以前，必須將該上下文參數轉化爲當前上下文。幸運的是，調用UIGraphicsPushContext 函數能夠方便的將context：參數轉化爲當前上下文，記住最後別忘了調用UIGraphicsPopContext函數恢復上下文環境。

簡言之：咱們通常使用UIBezierPath都是在重寫的drawRecrt方法這種情形。其繪圖的步驟是這樣的：

• 1.重寫drawRect方法。但不須要咱們本身獲取當前上下文context；
• 2.建立相應圖形的UIBezierPath對象，並設置一些修飾屬性；
• 3.渲染，完成繪製。

- (void)drawRect:(CGRect)rect // 1.重寫drawRect方法 { UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)]; // 2.建立圖形相應的UIBezierPath對象 // 3.設置一些修飾屬性 aPath.lineWidth = 8.0; aPath.lineCapStyle = kCGLineCapRound; aPath.lineJoinStyle = kCGLineCapRound; UIColor *color = [UIColor colorWithRed:0 green:0 blue:0.7 alpha:1]; [color set]; [aPath stroke]; // 4.渲染，完成繪製 }

須要理解的東西很少，主要是一些代碼須要記憶。因此就不寫代碼了，直接看別人的代碼：繪圖1-UIBezierPath

---

Core Graphics

這是一個繪圖專用的API族，它常常被稱爲QuartZ或QuartZ 2D。Core Graphics是iOS上全部繪圖功能的基石，包括UIKit。

要搞清楚Core Graphics就要搞清楚下面幾個問題：

1.繪圖須要 CGContextRef
CGContextRef即圖形上下文。能夠這麼理解，咱們繪圖是須要一個載體或者說輸出目標，它用來顯示繪圖信息，而且決定繪製的東西輸出到哪一個地方。能夠形象的比喻context就像一個「畫板」，咱們得把圖形繪製到這個畫板上。因此，繪圖必需要先有context。
2.怎麼拿到context？

第一種方法是利用cocoa爲你生成的圖形上下文。當你子類化了一個UIView並實現了本身的drawRect：方法後，一旦drawRect：方法被調用，Cocoa就會爲你建立一個圖形上下文，此時你對圖形上下文的全部繪圖操做都會顯示在UIView上。

第二種方法就是建立一個圖片類型的上下文。調用UIGraphicsBeginImageContextWithOptions函數就可得到用來處理圖片的圖形上下文。利用該上下文，你就能夠在其上進行繪圖，並生成圖片。調用UIGraphicsGetImageFromCurrentImageContext函數可從當前上下文中獲取一個UIImage對象。記住在你全部的繪圖操做後別忘了調用UIGraphicsEndImageContext函數關閉圖形上下文。

簡言之：

• 重寫UIView的drawRect方法，在該方法裏即可獲得context；
• 調用UIGraphicsBeginImageContextWithOptions方法獲得context；

3.注意
並非說一提到繪圖，就必定得重寫drawRect方法，只是由於一般狀況下咱們通常採用在drawRect方法裏獲取context這種方式。

4.drawRect方法何時觸發

• 1.當view第一次顯示到屏幕上時；
• 2.當調用view的setNeedsDisplay或者setNeedsDisplayInRect:方法時。

步驟：

• 1.先在drawRect方法中得到上下文context；
• 2.繪製圖形（線，圖形，圖片等）；
• 3.設置一些修飾屬性；
• 4.渲染到上下文，完成繪圖。

#import "CustomView.h" @implementation CustomView - (void)drawRect:(CGRect)rect { // 1.獲取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // --------------------------實心圓 // 2.畫圖 CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 50, 50)); [[UIColor greenColor] set]; // 3.渲染 CGContextFillPath(ctx); // --------------------------空心圓 CGContextAddEllipseInRect(ctx, CGRectMake(70, 10, 50, 50)); [[UIColor redColor] set]; CGContextStrokePath(ctx); // --------------------------橢圓 //畫橢圓和畫圓方法同樣，橢圓只是設置不一樣的長寬 CGContextAddEllipseInRect(ctx, CGRectMake(130, 10, 100, 50)); [[UIColor purpleColor] set]; CGContextFillPath(ctx); // --------------------------直線 CGContextMoveToPoint(ctx, 20, 80); // 起點 CGContextAddLineToPoint(ctx, self.frame.size.width-10, 80); //終點 // CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0); // 顏色 [[UIColor redColor] set]; // 兩種設置顏色的方式均可以 CGContextSetLineWidth(ctx, 2.0f); // 線的寬度 CGContextSetLineCap(ctx, kCGLineCapRound); // 起點和重點圓角 CGContextSetLineJoin(ctx, kCGLineJoinRound); // 轉角圓角 CGContextStrokePath(ctx); // 渲染（直線只能繪製空心的，不能調用CGContextFillPath(ctx);） // --------------------------三角形 CGContextMoveToPoint(ctx, 10, 150); // 第一個點 CGContextAddLineToPoint(ctx, 60, 100); // 第二個點 CGContextAddLineToPoint(ctx, 100, 150); // 第三個點 [[UIColor purpleColor] set]; CGContextClosePath(ctx); CGContextStrokePath(ctx); // --------------------------矩形 CGContextAddRect(ctx, CGRectMake(20, 170, 100, 50)); [[UIColor orangeColor] set]; // CGContextStrokePath(ctx); // 空心 CGContextFillPath(ctx); // --------------------------圓弧 CGContextAddArc(ctx, 200, 170, 50, M_PI, M_PI_4, 0); CGContextClosePath(ctx); CGContextFillPath(ctx); // --------------------------文字 NSString *str = @"你在紅樓，我在西遊"; NSMutableDictionary *dict = [NSMutableDictionary dictionary]; dict[NSForegroundColorAttributeName] = [UIColor whiteColor]; // 文字顏色 dict[NSFontAttributeName] = [UIFont systemFontOfSize:14]; // 字體 [str drawInRect:CGRectMake(20, 250, 300, 30) withAttributes:dict]; // --------------------------圖片 UIImage *img = [UIImage imageNamed:@"yingmu"]; // [img drawAsPatternInRect:CGRectMake(20, 280, 300, 300)]; // 多個平鋪 // [img drawAtPoint:CGPointMake(20, 280)]; // 繪製到指定點，圖片有多大就顯示多大 [img drawInRect:CGRectMake(20, 280, 80, 80)]; // 拉伸 }

---

繪圖它能幹什麼？爲何要學習它？

咱們經常使用繪圖來自定義一些視圖控件，以達到咱們個性化的需求。
若自定義視圖控件：咱們能夠子類化一個UIView，而後重寫它的drawRect方法。在drawRect裏進行圖形繪製，從而實現自定義控件，完成酷炫個性化的控件。

結尾

關於繪圖，其實在我當前接觸的項目中用得不多，可是之後確定會接觸到。像這種不經常使用但比較重要的內容，我以爲要作到初步理解，而後梳理總結，到最後深度理解。因此寫這篇文章。

文／Wang66（簡書做者） 原文連接：http://www.jianshu.com/p/8e6e960eea7d 著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。