Quartz2D是一個(gè)二維繪圖引擎肤视，同時(shí)支持iOS和Mac系統(tǒng)
功能：
- 繪制圖形（線條茵汰、三角形赂弓、矩形绑榴、圓、弧等）
- 繪制文字
- 繪制\生成圖片
- 讀取\生成PDF
- 截圖\裁剪圖片
- 自定義UI控件
1.圖形上下文
相當(dāng)于現(xiàn)實(shí)中的畫(huà)板盈魁，是一個(gè)CGContextRef類型的數(shù)據(jù)
作用：
- 保存繪圖信息翔怎、繪圖狀態(tài)
- 決定繪制的輸出目標(biāo)
2.利用Quartz2D自定義view
- 首先，得有圖形上下文杨耙，因?yàn)樗鼙４胬L圖信息赤套，并且決定著繪制到什么地方去
- 其次，那個(gè)圖形上下文必須跟view相關(guān)聯(lián)珊膜，才能將內(nèi)容繪制到view上面
3.自定義view步驟
- 新建一個(gè)類容握，繼承自UIView
- 實(shí)現(xiàn)- (void)drawRect:(cgrect)rect方法，然后在這個(gè)方法中取得跟當(dāng)前view相關(guān)聯(lián)的圖形上下文车柠，繪制相應(yīng)的圖形內(nèi)容唯沮，利用圖形上下文講繪制的所有內(nèi)容渲染顯示到view上面
4.通常在drawRect:(CGRect)rect這個(gè)方法里面繪制圖形脖旱，只有在這個(gè)方法里面才能獲取到跟view的layer相關(guān)聯(lián)的圖形上下文，當(dāng)這個(gè)view要顯示的時(shí)候才會(huì)調(diào)用此方法繪制圖形介蛉，一般只調(diào)用一次
5.畫(huà)一條簡(jiǎn)單的線
- 方法一
// 注意：rect是當(dāng)前控件的bounds
- (void)drawRect:(CGRect)rect {
// 1.獲取圖像上下文
// 目前我們所用的上下文都是UIGraphics開(kāi)頭的
// CGContextRef Ref:引用 CG：目前使用到的類型和函數(shù)一般都是CG開(kāi)頭 CoreGraphics
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.描述路徑
// 創(chuàng)建路徑
CGMutablePathRef path = CGPathCreateMutable();
// 設(shè)置起點(diǎn)
// path：給哪個(gè)路徑設(shè)置起點(diǎn)
CGPathMoveToPoint(path, NULL, 50, 50);
// 添加一根線到某個(gè)點(diǎn)
CGPathAddLineToPoint(path, NULL, 200, 200);
// 3.把路徑添加到上下文
CGContextAddPath(ctx, path);
// 4.渲染上下文
CGContextStrokePath(ctx);
}
- 方法二
- (void)drawRect:(CGRect)rect {
// 1.獲取圖像上下文
// 目前我們所用的上下文都是UIGraphics開(kāi)頭的
// CGContextRef Ref:引用 CG：目前使用到的類型和函數(shù)一般都是CG開(kāi)頭 CoreGraphics
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.描述路徑
// 設(shè)置起點(diǎn)
CGContextMoveToPoint(ctx, 50, 50);
// 設(shè)置某個(gè)線從某個(gè)點(diǎn)(里面封裝了添加到上下文的代碼)
CGContextAddLineToPoint(ctx, 200, 200);
// 3.渲染上下文
CGContextStrokePath(ctx);
}
- 方法三
- (void)drawRect:(CGRect)rect {
// 貝瑟爾路徑
// 創(chuàng)建路徑
UIBezierPath *path = [UIBezierPath bezierPath];
// 設(shè)置起點(diǎn)
[path moveToPoint:CGPointMake(50, 50)];
// 添加一根線到某個(gè)點(diǎn)
[path addLineToPoint:CGPointMake(200, 200)];
// 繪制路徑
[path stroke];
}
6.基本圖形繪制（形狀）
廢話不多說(shuō)萌庆，一樣的原理，直接上代碼
- 方法一
- (void)drawCtxState1
{
// 獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 描述路徑
CGContextMoveToPoint(ctx, 50, 50);
CGContextAddLineToPoint(ctx, 100, 50);
// 設(shè)置起點(diǎn)
CGContextMoveToPoint(ctx, 80, 60);
// 如果不重新設(shè)置起點(diǎn)币旧，默認(rèn)下一根線的起點(diǎn)是上一根線的終點(diǎn)
CGContextAddLineToPoint(ctx, 100, 200);
// 設(shè)置繪圖狀態(tài), 一定要在渲染之前
// 顏色
[[UIColor greenColor] setStroke];
// 線寬
CGContextSetLineWidth(ctx, 5);
// 設(shè)置連接樣式(kCGLineJoinRound 圓角践险， kCGLineJoinMiter直角， kCGLineJoinBevel正切 缺一個(gè)角)
CGContextSetLineJoin(ctx, kCGLineJoinRound);
// 設(shè)置頂角樣式
CGContextSetLineCap(ctx, kCGLineCapRound);
// 渲染上下文
CGContextStrokePath(ctx);
}
- 方法二
- (void)drawCtxState2
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(200, 200)];
path.lineWidth = 5;
[[UIColor redColor] set];
[path stroke];
UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(0, 0)];
[path1 addLineToPoint:CGPointMake(30, 60)];
[[UIColor greenColor] set];
path1.lineWidth = 5;
[path1 stroke];
}
7.繪制曲線
- (void)drawRect:(CGRect)rect {
// Drawing code
// 如何繪制曲線
// 原聲繪制方法
// 獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 描述路徑
// 設(shè)置起點(diǎn)
CGContextMoveToPoint(ctx, 100, 100);
// cpx：控制點(diǎn)的x
CGContextAddQuadCurveToPoint(ctx, 150, 50, 250, 50);
// 渲染上下文
CGContextStrokePath(ctx);
}
cpx：控制點(diǎn)的x 這個(gè)點(diǎn)就相當(dāng)于一條直線吹菱，拿住中點(diǎn)往任意方向拽巍虫，最后落下的那個(gè)點(diǎn)就是這個(gè)cpx 如果這樣說(shuō)還不懂的話，其實(shí)我也是沒(méi)有辦法?? （配合下面的圖一起理解鳍刷，如果還是不懂占遥，可以留言給我）
Paste_Image.png
8.圓角矩形
- (void)drawRect:(CGRect)rect {
// Drawing code
// 圓角矩形
// UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 200, 200) cornerRadius:10];
[path stroke];
// 填充：必須是一個(gè)完整的封閉路徑, 默認(rèn)會(huì)自動(dòng)關(guān)閉路徑
// [path fill];
}
9.圓弧&扇形
- (void)drawRect:(CGRect)rect {
// Drawing code
// 圓弧
// center:圓心
// startAngle：弧度 M_PI:180度 clockwise:yes是順時(shí)針 no逆時(shí)針
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 250) radius:100 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
[[UIColor purpleColor] set];
// 扇形
CGPoint center = CGPointMake(150, 250);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
// 添加一根線到圓心
[path addLineToPoint:center];
// 封閉路徑，關(guān)閉路徑输瓜，從路徑的終點(diǎn)到起點(diǎn)
[path closePath];
[path stroke];
// 填充：必須是一個(gè)完整的封閉路徑, 默認(rèn)會(huì)自動(dòng)關(guān)閉路徑
// [path fill];
}
掌握了以上的基礎(chǔ)畫(huà)法瓦胎，就可以畫(huà)出餅圖， 柱形圖尤揣，加載框等效果搔啊。
根據(jù)進(jìn)度條控制加載的數(shù)據(jù)
Paste_Image.png
餅圖
Paste_Image.png
10.繪制文字
- (void)drawRect:(CGRect)rect {
// Drawing code
// 繪制文字
NSString *str = @"louise";
// 文字的起點(diǎn)
// Attributes 文本屬性
NSMutableDictionary *textDic = [NSMutableDictionary dictionary];
// 設(shè)置文字顏色等屬性
textDic[NSForegroundColorAttributeName] = [UIColor redColor];
textDic[NSFontAttributeName] = [UIFont systemFontOfSize:50];
// 設(shè)置文字的空心顏色和寬度
textDic[NSStrokeWidthAttributeName] = @3;
textDic[NSStrokeColorAttributeName] = [UIColor yellowColor];
// 創(chuàng)建陰影對(duì)象
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor purpleColor];
shadow.shadowOffset = CGSizeMake(10, 10);
shadow.shadowBlurRadius = 5;
textDic[NSShadowAttributeName] = shadow;
// 富文本，給普通的文字添加顏色北戏，字體大小
[str drawAtPoint:CGPointZero withAttributes:textDic];
}
