gitHub傳送門,點我哦!
在iOS中常用的繪圖框架就是Quartz 2D，Quartz 2D是Core Graphics框架的一部分，是一個強大的二維圖像繪制引擎。Quartz 2D在UIKit中也有很好的封裝和集成，我們日常開發時所用到的UIKit中的組件都是由Core Graphics進行繪制的。不僅如此，當我們引入UIKit框架時系統會自動引入Core Graphics框架，并且為了方便開發者使用在UIKit內部還對一些常用的繪圖API進行了封裝。
在iOS中繪圖一般分為以下幾個步驟：
1.獲取繪圖上下文
2.創建并設置路徑
3.將路徑添加到上下文
4.設置上下文狀態
5.繪制路徑
6.釋放路徑
圖形上下文CGContextRef代表圖形輸出設備（也就是繪制的位置），包含了繪制圖形的一些設備信息，Quartz 2D中的所有對象最終都必須繪制到圖形上下文。這樣一來，我們在繪制圖形時就不必關心具體的設備信息，統一了代碼編寫方式（在Quartz 2D中的繪圖上下文可以是位圖Bitmap、PDF、窗口Window、層Layer、打印對象Printer）.
基本繪圖:
在UIKit中默認已經為我們準備好了一個圖形上下文對象，在UI控件的drawRect:方法（這個方法在loadView、viewDidLoad方法后執行）中我們可以通過UIKit封裝函數UIGraphicsGetCurrentContext()方法獲得這個圖形上下文(注意在其他UI控件方法中無法取得這個對象)，然后我們只要按照繪圖步驟一步步執行即可。下面自定義一個KCView繼承自UIView，重寫drawRect:方法繪制兩條直線說明上面繪圖的步驟：
CustomView.m
#import "CustomView.h"
@implementation CustomView
/*
基本繪圖
在iOS中繪圖一般分為以下幾個步驟:
1.獲取繪圖上下文
2.創建并設置路徑
3.將路徑添加到上下文
4.設置上下文狀態
5.繪制路徑
6.釋放路徑
*/
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor orangeColor];
}
return self;
}
//繪圖只能在此方法中調用,否則無法得到當前圖形的上下文
- (void)drawRect:(CGRect)rect {
//1.獲取到圖像上下文對象
CGContextRef context = UIGraphicsGetCurrentContext();
//2.創建路徑對象
CGMutablePathRef path = CGPathCreateMutable();
CGAffineTransform transform = CGAffineTransformScale(self.transform, 1, 1);
CGPathMoveToPoint(path, &transform, rect.origin.x, rect.origin.y + 50);//移動到指定位置(設置路徑起點)
CGPathAddLineToPoint(path, &transform, rect.origin.x + 50, rect.origin.y + 100);//繪制直線（從起始位置開始）
CGPathAddLineToPoint(path, &transform, [UIScreen mainScreen].bounds.size.width - 50, rect.origin.y + 100);//繪制另外一條直線（從上一直線終點開始繪制）
CGPathAddLineToPoint(path, &transform, [UIScreen mainScreen].bounds.size.width, rect.origin.y + 50);
//3.將路徑添加到上下文
CGContextAddPath(context, path);
CGContextSetRGBStrokeColor(context, 1.0, 0, 0, 1.0);//設置筆觸顏色
CGContextSetRGBFillColor(context, 0, 1.0, 0, 1.0);//設置填充顏色
CGContextSetLineWidth(context, 2);//設置線條寬度
CGContextSetLineCap(context, kCGLineCapRound);//設置頂點樣式
CGContextSetLineJoin(context, kCGLineJoinRound);//設置連接點樣式
/*4.設置線段樣式
phase:虛線開始的位置
lengths:虛線長度間隔 lengths值為｛10, 20, 10｝，則表示先繪制10個點，跳過20個點，繪制10個點，跳過10個點，再繪制20個點，如此反復
lengths的值｛10,10｝表示先繪制10個點，再跳過10個點，如此反復
count:虛線數組元素個數(count的值等于lengths數組的長度)
*/
CGFloat lengths[3] = {10, 20, 10};
CGContextSetLineDash(context, 50, lengths, 3);
/*設置陰影
context:圖形上下文
offset:偏移量
blur:模糊度
color:陰影顏色
*/
CGColorRef color = [UIColor grayColor].CGColor;//顏色轉化，由于Quartz 2D跨平臺，所以其中不能使用UIKit中的對象，但是UIkit提供了轉化方法
CGContextSetShadowWithColor(context, CGSizeMake(2, 2), 0.8, color);
//5.繪制圖像到指定圖形上下文
/*CGPathDrawingMode是填充方式,枚舉類型
kCGPathFill:只有填充（非零纏繞數填充），不繪制邊框
kCGPathEOFill:奇偶規則填充（多條路徑交叉時，奇數交叉填充，偶交叉不填充）
kCGPathStroke:只有邊框
kCGPathFillStroke：既有邊框又有填充
kCGPathEOFillStroke：奇偶填充并繪制邊框
*/
CGContextDrawPath(context, kCGPathFillStroke);//最后一個參數是填充類型
//6.釋放對象
CGPathRelease(path);
//----------------------------簡化繪圖方式-----------------------
//上面的繪圖方式未免顯得有些麻煩，其實Core Graphics 內部對創建對象添加到上下文這兩步操作進行了封裝，可以一步完成。另外前面也說過UIKit內部其實封裝了一些以“UI”開頭的方法幫助大家進行圖形繪制。就拿前面的例子來說我們改進一些繪制方法
//繪制路徑(相當于前面創建路徑并添加路徑到圖形上下文兩步操作)
CGContextMoveToPoint(context, 0, rect.origin.y + 200);
CGContextAddLineToPoint(context, 50, rect.origin.y + 300);
CGContextAddLineToPoint(context, [UIScreen mainScreen].bounds.size.width, rect.origin.y + 300);
CGContextAddLineToPoint(context, [UIScreen mainScreen].bounds.size.width - 50, rect.origin.y + 200);
//封閉路徑:直接調用路徑封閉方法
CGContextClosePath(context);
//設置圖形上下文屬性
[[UIColor yellowColor] setFill];
[[UIColor blueColor] setStroke];
CGContextSetLineWidth(context, 0);
CGContextSetShadow(context, CGSizeMake(0, 0), 0);
//開始繪制
CGContextDrawPath(context, kCGPathFillStroke);
//畫橢圓(加陰影)
CGContextAddEllipseInRect(context, CGRectMake(0, 350, 300, 200));
[[UIColor redColor] setFill];
CGContextSetShadowWithColor(context, CGSizeMake(20, 30), 30, [UIColor yellowColor].CGColor);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
//繪制弧形
/*添加弧形對象
x:中心點x坐標
y:中心點y坐標
radius:半徑
startAngle:起始弧度
endAngle:終止弧度
closewise:是否逆時針繪制，0則順時針繪制
*/
CGContextAddArc(context, [UIScreen mainScreen].bounds.size.width / 2, 550, 100, 0.0, -M_PI_2, 0);
CGContextSetShadow(context, CGSizeMake(0, 0), 0);
[[UIColor blueColor] set];
CGContextDrawPath(context, kCGPathFillStroke);
//注:矩形就不列出來了 方法都是一樣的大家可以嘗試一下
}
@end
調用
#import "ViewController.h"
#import "CustomView.h"
@interface ViewController ()
@property (nonatomic, strong) CustomView *customView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
_customView = [[CustomView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
[self.view addSubview:_customView];
}
@end
效果圖
Simulator Screen Shot 2017年6月30日 16.47.20.png
