一 、前言
iOS開發(fā)中我們經(jīng)常會使用UIButton，UILabel等，這些簡單的api可以讓我們很快完成常規(guī)界面的開發(fā)。如果碰到一些需要自定義的界面，我們肯定需要自己繪制。今天就學(xué)習(xí)記錄下iOS中關(guān)于繪制的框架CoreGraphics。
二、介紹
Core Graphics是基于Quartz 2D的一個(gè)高級繪圖引擎，常用于iOS，tvOS，macOS的圖形繪制應(yīng)用開發(fā)。Core Graphics是對底層C語言的一個(gè)簡單封裝，其中提供大量的低層次，輕量級的2D渲染API。
系統(tǒng)的繪圖框架
- UIKit
我們平常最常用的就是UIKit，其底層是依賴CoreGraphics實(shí)現(xiàn)的，而且絕大多數(shù)的圖形界面也都是由UIKit完成，像UILabel、UIButton、UIBezierPath、UIColor簡單的使用他們提供的API就能繪制到界面上，底層也是基于CoreGraphics實(shí)現(xiàn)。 - Core Animation
提供了強(qiáng)大的2D和3D動(dòng)畫服務(wù)，它也與UIView高度集成。iOS中的動(dòng)畫都是基于它實(shí)現(xiàn)。 - CoreGraphics
這就是本文介紹的重點(diǎn)，iOS中使用最多的繪圖框架，常用于繪制自定義視圖，純C的API，使用Quartz2D做引擎。Core Graphics數(shù)據(jù)結(jié)構(gòu)和函數(shù)可以通過CG前綴來識別。 - OpenGL-ES
這也是一套繪圖框架，它是一套編程規(guī)范，具體實(shí)現(xiàn)由各平臺自己完成。所以它是跨平臺的，常用于游戲繪制。
CoreGraphics的坐標(biāo)系
UIKit的坐標(biāo)與Core Graphics的坐標(biāo)是不一樣的，UIKit的坐標(biāo)默認(rèn)原點(diǎn)在左上角，而Core Graphics的原點(diǎn)在左下角。通過兩個(gè)坐標(biāo)系之間是需要轉(zhuǎn)化后才能使用的。
那為什么我們在drawRect方法中使用CoreGraphics方法繪制內(nèi)容的時(shí)候可以使用UIKit的坐標(biāo)系？
因?yàn)閕OS系統(tǒng)在drawRect返回CGContext的時(shí)候，默認(rèn)幫我們進(jìn)行了一次變換，以方便開發(fā)者直接用UIKit坐標(biāo)系進(jìn)行渲染。
三、使用
-
使用須知
在介紹具體使用之前，我們需要知道，iOS的繪圖必須在上下文中繪制，所以繪制前必須先獲取上下文。如果是繪制圖片，則先獲取一個(gè)圖片上下文，如果是其他視圖，就需要獲取一個(gè)非圖片上下文。上下文可以理解為畫布，在上面進(jìn)行繪圖。
圖形上下文（注意不是圖片）context，在drawRect方法中通過UIGraphicsGetCurrentContext獲取。
圖片上下文imageContext (不必在drawRect方法中)，通過UIGraphicsBeginImageContextWithOptions:獲取，然后繪制完成后，調(diào)用UIGraphicsGetImageFromCurrentImageContext獲取繪制的圖片，最后要記得關(guān)閉圖片上下文UIGraphicsEndImageContext。
-
使用方法
1、圖片上下文使用
圖片類型的上下文，不需要在drawRect方法中，在普通的oc方法中就可以進(jìn)行繪制：
使用Core Graphics繪制
// 獲取圖片上下文
UIGraphicsBeginImageContextWithOptions(CGSizeMake(60,60), NO, 0);
// 繪圖
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(con, CGRectMake(0,0,60,60));
CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);
CGContextFillPath(con);
// 從圖片上下文中獲取繪制的圖片
UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
// 關(guān)閉圖片上下文
UIGraphicsEndImageContext();
使用UIKit繪制
// 獲取圖片上下文
UIGraphicsBeginImageContextWithOptions(CGSizeMake(60,60), NO, 0);
// 繪圖
UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,60,60)];
[[UIColor blueColor] setFill];
[p fill];
// 從圖片上下文中獲取繪制的圖片
UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
// 關(guān)閉圖片上下文
UIGraphicsEndImageContext();
2、圖形上下文使用
在view的drawRect方法中，實(shí)現(xiàn)重新繪制
使用Core Graphics繪制
- (void) drawRect: (CGRect) rect {
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(con, CGRectMake(0,0,60,60));
CGContextSetFillColorWithColor(con, [UIColor greenColor].CGColor);
CGContextFillPath(con);
}
使用UIKit繪制
- (void) drawRect: (CGRect) rect {
UIBezierPath* p = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,60,60)];
[[UIColor blueColor] setFill];
[p fill];
}
3、設(shè)置繪圖的上下文(context)
- UIGraphicsPushContext(context)：把context壓入棧中，并把context設(shè)置為當(dāng)前繪圖上下文
- UIGraphicsPopContext()：將棧頂?shù)纳舷挛膹棾?，恢?fù)先前的上下文，但是繪圖狀態(tài)不變
- (void)drawRect:(CGRect)rect {
[[UIColor redColor] setFill];
UIGraphicsPushContext(UIGraphicsGetCurrentContext());
[[UIColor blackColor] setFill];
UIGraphicsPopContext();
UIRectFill(CGRectMake(100, 100, 100, 100)); // black color
}
-
使用總結(jié)
可以看到使用UIKit繪制時(shí)，我們使用了UIBezierPath。它是對CoreGraphics的進(jìn)一步封裝，所以使用起來更加簡單。
