相關(guān)資源
chess.gif
gestureLock.gif
Quartz2D
Quartz2D是一個二維繪圖引擎，同時支持iOS和Mac系統(tǒng)。iOS中，大部分控件都是Quartz2D繪制出來的。這里需要重點說明一下，Quartz2D的接口（函數(shù)）和使用對象（或者結(jié)構(gòu)體）定義在CoreGraphics框架和UIKit中。一般情況下我們使用UIKit下面提供的對象和接口就可以實現(xiàn)豐富的功能。復(fù)雜的情況下需要混合使用，或者只使用CoreGraphics框架。CoreGraphics是C語言框架，使用起來不如面向?qū)ο蠓奖恪?/p>
圖形上下文
提到繪圖，我們就得了解最基本的概念。圖形上下文所表示的是圖形繪制的平臺。包含繪制參數(shù)以及需要執(zhí)行一系列繪圖命令的設(shè)備信息。圖形上下文定義了包括繪制顏色、裁剪區(qū)域、曲線寬度以及繪制模式信息、文本字體信息、一些合成選項或者是一些其他的有關(guān)繪制的基本屬性。看下圖，了解一下上下文的分類：
CGContext.png這里主要分析和用到了兩種上下文：
1. Bitmap Graphics Context
位圖上下文，在這個上下文上繪制或者渲染的內(nèi)容，可以獲取成圖片（需要主動開啟一個上下文來使用，使用完畢，一定要銷毀或者關(guān)閉；所以這里也不需要在UIView 的 drawRect:方法里獲取上下文了）。
開啟和關(guān)閉上下文
// 開啟一個圖片（位圖）上下文//size:上下文尺寸，opaque:不透明度，scale:如果設(shè)置為0.0，這個設(shè)置是屏幕的scale，例如iPhone6是2，iPhone6P是3。
UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale);
// 關(guān)閉位圖上下文
UIGraphicsEndImageContext();
簡單示例
-
打水印
UIImage *image = [UIImage imageNamed:@"卡哇伊"]; UIGraphicsBeginImageContextWithOptions(image.size, NO, 0.0); //把圖片給繪制圖片上下文. [image drawAtPoint:CGPointZero]; //繪制文字 NSString *str = @"I Love You"; [str drawAtPoint:CGPointZero withAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:20]}]; //生成圖片 UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); //手動關(guān)閉上下文 UIGraphicsEndImageContext(); self.imageV.image = newImage;
printCharacters.png
- 擦圖
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.imageV.userInteractionEnabled = YES;
//添加手勢
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self.imageV addGestureRecognizer:pan];
}
- (void)pan:(UIPanGestureRecognizer *)pan{
//獲取當(dāng)前手指所在的點
CGPoint curP = [pan locationInView:self.imageV];
CGFloat rectWH = 50;
CGFloat x = curP.x - rectWH * 0.5;
CGFloat y = curP.y - rectWH * 0.5;
CGRect rect = CGRectMake(x, y, rectWH, rectWH);
//開啟一個圖片上下文.
UIGraphicsBeginImageContextWithOptions(self.imageV.bounds.size, NO, 0);
//獲取當(dāng)前的上下文.
CGContextRef ctx = UIGraphicsGetCurrentContext();
//把UImageViwe上面的圖片給繪制到上下文.
[self.imageV.layer renderInContext:ctx];
//確定擦除區(qū)域
CGContextClearRect(ctx, rect);
//生成一張新圖片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//把上下文給關(guān)閉
UIGraphicsEndImageContext();
//給原來圖片重新賦值
self.imageV.image = newImage;
}
erasePicture.gif
- 截屏
//1.開啟圖片上下文.
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);
//獲取當(dāng)前的上下文.
CGContextRef ctx = UIGraphicsGetCurrentContext();
//UIView之所能夠顯示,是因為layer.把層渲染給位圖上下文.
[self.view.layer renderInContext:ctx];
//生成一張圖片.
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//如何把圖片轉(zhuǎn)換成二進流.
NSData *data = UIImagePNGRepresentation(newImage);
[data writeToFile:@"/Users/Boat/Desktop/newImage.png" atomically:YES];
//關(guān)閉上下文.
UIGraphicsEndImageContext();
2. Layer Graphics Context
圖層上下文，針對UI控件的上下文。我們已經(jīng)很清楚，view之所以能顯示內(nèi)容，全靠layer（圖層）。
UIView 的 drawRect:方法
drawRect: 這個是UIKit提供給UIView的方法，只有在此方法中我們才可以獲取到與此View對象對應(yīng)的圖層上下文（CGContextRef）；但是有時候我們在想，蘋果為什么不直接給CALayer提供此方法呢？可能是我才疏學(xué)淺，畢竟QuartsCore也給我們提供了各種類型的layer，也許我們需要挖掘一下QuartsCore下面的CALayer。詳情請參考頂部的相關(guān)資源。
基本繪圖
先通過基本繪圖，我們可以總結(jié)用法以及原理。
- 簡單直線
// Drawing code
NSLog(@"%s",__func__);
NSLog(@"%@",NSStringFromCGRect(self.bounds));
//1.取得一個跟View相關(guān)聯(lián)的上下文.
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
UIBezierPath *path = [UIBezierPath bezierPath];
//2.1.設(shè)置起點
[path moveToPoint:CGPointMake(10, 100)];
//2.1.添加一根線到某個點
[path addLineToPoint:CGPointMake(200, 20)];
//一個路徑上面可以畫多條線
[path moveToPoint:CGPointMake(10, 150)];
[path addLineToPoint:CGPointMake(200, 100)];
//把上一條線的終點當(dāng)作是下一條線的起點.
[path addLineToPoint:CGPointMake(150, 200)];
//設(shè)置上下文的狀態(tài)
//設(shè)置線的寬度
CGContextSetLineWidth(ctx, 10);
//設(shè)置線的連接樣式
CGContextSetLineJoin(ctx, kCGLineJoinBevel);
//設(shè)置頂角的樣式
CGContextSetLineCap(ctx, kCGLineCapRound);
//設(shè)置線的顏色
[[UIColor greenColor] setStroke];
//3.把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
//4.把上下文的內(nèi)容顯示View fill stroke
CGContextStrokePath(ctx);
drawLine.png
- 簡單曲線
//1.獲取跟View相關(guān)聯(lián)的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
UIBezierPath *path = [UIBezierPath bezierPath];
//2.1設(shè)置起點
[path moveToPoint:CGPointMake(20, 200)];
//2.2添加一條曲線到某個點.
[path addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(100, 10)];
CGContextSetLineWidth(ctx, 10);
//3.把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
//4.把上下文的內(nèi)容顯示出來.
CGContextStrokePath(ctx);
drawQuadCurve.png
- 簡單矩形
//1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 100, 100)];
//3.把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
[[UIColor yellowColor] set];
//4.把上下文的內(nèi)容顯示
CGContextFillPath(ctx);
drawRectangle.png
-
簡單餅圖
NSArray *dataArray = @[@25,@25,@25,@25];
//畫餅圖扇形
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
CGFloat radius = rect.size.width * 0.5 - 10;
CGFloat startA = 0;
CGFloat angle = 0;
CGFloat endA = 0;
for (NSNumber *num in dataArray) {
startA = endA;
angle = num.intValue / 100.0 * M_PI * 2;
endA = startA + angle;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
[path addLineToPoint:center];
[[self randomColor] set];
[path fill];
}
//隨機生成一個顏色
-
(UIColor *)randomColor{
CGFloat r = arc4random_uniform(256) / 255.0;
CGFloat g = arc4random_uniform(256) / 255.0;
CGFloat b = arc4random_uniform(256) / 255.0;//0-255.
// colorWithRed 0-1
return [UIColor colorWithRed:r green:g blue:b alpha:1];
}
> 
> 現(xiàn)在基本可以總結(jié)使用方法：
>
> 1. 獲得上下文
>
> 2. 繪制/拼接繪圖路徑
>
> 3. 上下文當(dāng)前棧設(shè)置，包括顏色，線條等
>
> 4. 將路徑添加到上下文
>
> 5. 渲染上下文
>
> Note:
>
> 這里使用的是UIKit下面的貝塞爾曲線類，沒用使用CoreGraphics的路徑。
>
> UIBezierPath包含很多對CoreGraphics的路徑（Path）的封裝，而且還提供直接渲染功能，當(dāng)然還包括對圖形上下文棧（CGContextRestoreGState）的封裝。
>
> 對于圖形上下文棧（CGContextRestoreGState）這里不做說明，請去站內(nèi)搜索。
#### UIKit對象直接繪圖
> 注意，這里介紹的仍然是圖層上下文（Layer Graphics Context）。這里相關(guān)知識不再介紹，也不再配圖。有興趣可以試一試。
1. 圖片UIImage對象相關(guān)
-
(void)drawRect:(CGRect)rect {
// Drawing code//1.加載圖片
UIImage *image = [UIImage imageNamed:@"001"];//2.繪制出來的圖片,是保持原來圖片
// [image drawAtPoint:CGPointZero];
//2. 把圖片填充到這個rect當(dāng)中.
[image drawInRect:rect];
// 添加裁剪區(qū)域 .把超區(qū)裁剪區(qū)域以外都裁剪掉
UIRectClip(CGRectMake(0, 0, 50, 50));
// [image drawAsPatternInRect:self.bounds];
}
2. 文字NSSting相關(guān)
NSString *str = @"辛為舟帥氣側(cè)漏";
//AtPoint:文字所畫的位置
//withAttributes:描述文字的屬性.
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
//設(shè)置文字大小
dict[NSFontAttributeName] = [UIFont systemFontOfSize:50];
//設(shè)置文字顏色
dict[NSForegroundColorAttributeName] = [UIColor greenColor];
//設(shè)置描邊寬度
dict[NSStrokeWidthAttributeName] = @2;
//設(shè)置描邊顏色
dict[NSStrokeColorAttributeName] = [UIColor blueColor];
//設(shè)置陰影
NSShadow *shadow = [[NSShadow alloc] init];
//設(shè)置陰影的便宜量
shadow.shadowOffset = CGSizeMake(10, 10);
//設(shè)置陰影顏色
shadow.shadowColor = [UIColor greenColor];
//設(shè)置陰影模糊程序
shadow.shadowBlurRadius = 1;
dict[NSShadowAttributeName] = shadow;
//不會自動換行
[str drawAtPoint:CGPointZero withAttributes:dict];
//會自動換行.
[str drawInRect:self.bounds withAttributes:dict];
