前言
iOS系統本身提供了兩套繪圖的框架，即 UIBezierPath 和** Core Graphics**。而前者所屬UIKit，其實是對Core Graphics框架關于path的進一步封裝，所以使用起來比較簡單。但是畢竟Core Graphics更接近底層，所以它更加強大。
UIBezierPath
-可以創建基于矢量的路徑，例如橢圓或者矩形，或者有多個直線和曲線段組成的形狀。
-UIBezierPath是UIKit中的一個關于圖形繪制的類，是通過Quartz 2D也就是CG（Core Graphics）CGPathRef的封裝得到的，從高級特性支持來看不及CG。
-使用UIBezierPath，你只能在當前上下文中繪圖，所以如果你當前處于UIGraphicsBeginImageContextWithOptions函數或drawRect：方法中，你就可以直接使用UIKit提供的方法進行繪圖。如果你持有一個context：參數，那么使用UIKit提供的方法之前，必須將該上下文參數轉化為當前上下文。幸運的是，調用UIGraphicsPushContext 函數可以方便的將context：參數轉化為當前上下文，記住最后別忘了調用UIGraphicsPopContext函數恢復上下文環境。
UIBezierPath對象
1、對象創建方法
// 創建基本路徑
+ (instancetype)bezierPath;
// 創建矩形路徑
+ (instancetype)bezierPathWithRect:(CGRect)rect;
// 創建橢圓路徑
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
// 創建圓角矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
// 創建指定位置圓角的矩形路徑
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
// 創建弧線路徑
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
// 通過CGPath創建
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
2、相關屬性和方法
- 屬性
// 與之對應的CGPath
@property(nonatomic) CGPathRef CGPath;
- (CGPathRef)CGPath NS_RETURNS_INNER_POINTER CF_RETURNS_NOT_RETAINED;
// 是否為空
@property(readonly,getter=isEmpty) BOOL empty;
// 整個路徑相對于原點的位置及寬高
@property(nonatomic,readonly) CGRect bounds;
// 當前畫筆位置
@property(nonatomic,readonly) CGPoint currentPoint;
// 線寬
@property(nonatomic) CGFloat lineWidth;
// 終點類型 (路徑的終點形狀,該屬性適用于開放路徑的起點和終點, 默認為kCGLineCapButt(方形結束, 結束位置正好為精確位置), 其他可選項為kCGLineCapRound(圓形結束, 結束位置超過精確位置半個線寬)和kCGLineCapSquare(方形結束, 結束位置超過精確位置半個線寬))
@property(nonatomic) CGLineCap lineCapStyle;
typedef CF_ENUM(int32_t, CGLineCap) {
kCGLineCapButt,
kCGLineCapRound,
kCGLineCapSquare
};
// 交叉點的類型(路徑的連接點形狀,默認為kCGLineJoinMiter(全部連接), 其他可選項為kCGLineJoinRound(圓形連接)和kCGLineJoinBevel(斜角連接))
@property(nonatomic) CGLineJoin lineJoinStyle;
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter,
kCGLineJoinRound,
kCGLineJoinBevel
};
// 兩條線交匯處內角和外角之間的最大距離,需要交叉點類型為kCGLineJoinMiter是生效，最大限制為10
@property(nonatomic) CGFloat miterLimit;
// 個人理解為繪線的精細程度，默認為0.6，數值越大，需要處理的時間越長
@property(nonatomic) CGFloat flatness;
// 決定使用even-odd或者non-zero規則
@property(nonatomic) BOOL usesEvenOddFillRule;
- 方法
//反方向繪制path
- (UIBezierPath *)bezierPathByReversingPath;
// 設置畫筆起始點
- (void)moveToPoint:(CGPoint)point;
// 從當前點到指定點繪制直線
- (void)addLineToPoint:(CGPoint)point;
// 添加弧線
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
// center弧線圓心坐標 radius弧線半徑 startAngle弧線起始角度 endAngle弧線結束角度 clockwise是否順時針繪制
//添加貝塞爾曲線
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
// endPoint終點 controlPoint控制點
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
// endPoint終點 controlPoint1、controlPoint2控制點
// 移除所有的點，刪除所有的subPath
- (void)removeAllPoints;
//填充
- (void)fill;
// 路徑繪制
- (void)stroke;
//使用一條直線閉合路徑的起點和終點, 該方法同時也會更新當前點到新直線的終點(即路徑的起點)
//- (void)closePath
注意：我們一般使用UIBezierPath都是在重寫的drawRect方法這種情形。其繪圖的步驟是這樣的：
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.渲染，完成繪制
}
3、具體demo如下
- 3.1 直線的繪制
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
// 起點
[path moveToPoint:CGPointMake(20, 100)];
// 繪制線條
[path addLineToPoint:CGPointMake(200, 20)];
[path stroke];
}
直線
- 3.2 矩形的繪制
3.2.1 直角矩形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 創建矩形路徑對象
UIBezierPath * path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 150, 100)];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
直角矩形
3.2.2 圓角矩形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 創建圓角矩形路徑對象
UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 150, 100) cornerRadius:30]; // 圓角半徑為30
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
圓角矩形
3.2.3圓角矩形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 150, 100) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(30, 30)];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
指定位置圓角矩形
corners：圓角位置 cornerRadii：圓角大小
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = 1 << 0,
UIRectCornerTopRight = 1 << 1,
UIRectCornerBottomLeft = 1 << 2,
UIRectCornerBottomRight = 1 << 3,
UIRectCornerAllCorners = ~0UL
};
- 4 圓形和橢圓形
4.1 圓形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 創建圓形路徑對象
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
圓形圖片
4.2 橢圓形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 創建橢圓形路徑對象
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
橢圓形圖片
- 5 曲線
5.1 弧線
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 創建弧線路徑對象
UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100)
radius:70
startAngle:3.1415926
endAngle:3.1415926 *3/2
clockwise:YES];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
弧線
center：弧線圓心坐標
radius：弧線半徑
startAngle：弧線起始角度
endAngle：弧線結束角度
clockwise：是否順時針繪制
默認坐標系統中的角度值
5.2 貝塞爾曲線1
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(20, 100)];
// 給定終點和控制點繪制貝塞爾曲線
[path addQuadCurveToPoint:CGPointMake(150, 100) controlPoint:CGPointMake(20, 0)];
[path stroke];
}
5.3 貝塞爾曲線2
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(20, 100)];
// 給定終點和兩個控制點繪制貝塞爾曲線
[path addCurveToPoint:CGPointMake(220, 100) controlPoint1:CGPointMake(120, 20) controlPoint2:CGPointMake(120, 180)];
[path stroke];
}
- 6 扇形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set]; // 畫筆顏色設置
UIBezierPath * path = [UIBezierPath bezierPath]; // 創建路徑
[path moveToPoint:CGPointMake(100, 100)]; // 設置起始點
[path addArcWithCenter:CGPointMake(100, 100) radius:75 startAngle:0 endAngle:3.14159/2 clockwise:NO]; // 繪制一個圓弧
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //線條拐角
path.lineJoinStyle = kCGLineCapRound; //終點處理
[path closePath]; // 封閉未形成閉環的路徑
[path stroke]; // 繪制
}
扇形圖片
- 7 多邊形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
// 起點
[path moveToPoint:CGPointMake(100, 50)];
// 添加直線
[path addLineToPoint:CGPointMake(150, 50)];
[path addLineToPoint:CGPointMake(200, 100)];
[path addLineToPoint:CGPointMake(200, 150)];
[path addLineToPoint:CGPointMake(150, 200)];
[path addLineToPoint:CGPointMake(100, 200)];
[path addLineToPoint:CGPointMake(50, 150)];
[path addLineToPoint:CGPointMake(50, 100)];
[path closePath];
//根據坐標點連線
[path stroke];
[path fill];
}
多邊形圖片
CoreGraphics
這是一個繪圖專用的API族，它經常被稱為
QuartZ或QuartZ 2D。Core Graphics是iOS上所有繪圖功能的基石，包括UIKit。
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:方法時。
5、步驟：
- 1.先在drawRect方法中獲得上下文context；
- 2.繪制圖形（線，圖形，圖片等）；
- 3.設置一些修飾屬性；
- 4.渲染到上下文，完成繪圖。
#import "CustomView.h"
@implementation CustomView
- (void)drawRect:(CGRect)rect
{
/****************1、實心圓***********************/
//獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//畫圖
CGContextAddEllipseInRect(ctx, CGRectMake(20, 20, 100, 100));
[[UIColor redColor] set];
//渲染
CGContextFillPath(ctx);
/****************2、空心圓***********************/
CGContextRef ctx1 = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx, CGRectMake(20, 200, 80, 100));
[[UIColor yellowColor] set];
//渲染
CGContextStrokePath(ctx1);
/****************3、直線***********************/
CGContextMoveToPoint(ctx1, 200, 200);
CGContextAddLineToPoint(ctx1, 300, 300);
[[UIColor redColor] set];
CGContextSetLineWidth(ctx1, 5);
CGContextSetLineCap(ctx1, kCGLineCapRound);// 起點和重點圓角
CGContextSetLineJoin(ctx1, kCGLineJoinRound);// 轉角圓角
CGContextStrokePath(ctx1);//渲染（直線只能繪制空心的，不能調用CGContextFillPath(ctx);）
/****************4、三角形**********************/
CGContextMoveToPoint(ctx1, 250, 64);//第一個點
CGContextAddLineToPoint(ctx1,250, 300);//第二個點
CGContextAddLineToPoint(ctx1, 350, 380);//第三個點
[[UIColor greenColor] set];
CGContextClosePath(ctx1);//關閉曲線
CGContextStrokePath(ctx1);
/****************5、矩形**********************/
CGContextAddRect(ctx1, CGRectMake(150, 0, 40, 80));
[[UIColor orangeColor] set];
CGContextStrokePath(ctx1);
/***************6、弧線*********************/
CGContextAddArc(ctx1, 200, 170, 50, 0, M_PI/2, 1);
[[UIColor greenColor] set];
CGContextClosePath(ctx1);
CGContextFillPath(ctx1);
/****************7、文字**********************/
NSString *str = @"CoreGraphics的用法總結";
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor yellowColor];
dict[NSFontAttributeName] = [UIFont systemFontOfSize:18];
[str drawInRect:CGRectMake(100, 80, 300, 300) withAttributes:dict];
/****************8、圖片**********************/
UIImage *img = [UIImage imageNamed:@"配送驗收hover"];
//[img drawAsPatternInRect:CGRectMake(20, 280, 300, 300)]; // 多個平鋪
//[img drawAtPoint:CGPointMake(20, 280)]; // 繪制到指定點，圖片有多大就顯示多大
[img drawInRect:CGRectMake(150, 280, 85, 85)];// 拉伸
}
[UIView Animation編程藝術]
(http://www.cocoachina.com/ios/20161018/17778.html)
http://www.cocoachina.com/industry/20140115/7703.html
