什么是Quartz2D
- Quartz 2D 是一個(gè)二維繪圖引擎魔眨，同時(shí)支持iOS和Mac系統(tǒng)
Quartz 2D的作用
- 繪制圖形：線條\三角形\矩形\圓形\弧\扇形等
- 繪制文字
- 繪制\生成圖片（圖像）
- 讀取\生成PDF
- 截圖\裁剪圖片
- 自定義UI控件
圖形上下文
- 一個(gè)CGContextRef類型的數(shù)據(jù)
圖形上下文的作用
- 保存繪圖信息秧骑、繪圖狀態(tài)
- 決定繪制的輸出目標(biāo)（繪制到什么地方去?）
- 相同的一套繪圖序列线衫，指定不同的Graphics Context，就可將相同的圖像繪制到不同的目標(biāo)上
自定義View
如何利用Quartz 2D繪制東西到view上激才？
- 首先缓醋，得有圖形上下文住练，因?yàn)樗鼙４胬L圖信息，并且決定著繪制到什么地方去
- 其次策彤，那個(gè)圖形上下文必須跟view相關(guān)聯(lián)栓袖，才能將內(nèi)容繪制到view上面
自定義view的步驟
- 新建一個(gè)類，繼承UIView
- 實(shí)現(xiàn)- (void)drawRect:(CGRect)rect方法
// 取得跟當(dāng)前view相關(guān)聯(lián)的圖形上下文
// 繪制相應(yīng)的圖形內(nèi)容
// 利用圖形上下文將繪制的所有內(nèi)容渲染顯示到view上面
- (void)drawRect:(CGRect)rect
> 在drawRect:方法中才能取得跟view相關(guān)聯(lián)的圖形上下文
> drawRect:方法在什么時(shí)候調(diào)用店诗？
> 當(dāng)view第一次顯示到屏幕上時(shí)（被加到UIWindow上顯示出來）
> 調(diào)用view的setNeedsDisplay或者setNeedsDisplayInRect:時(shí)
Quartz 2D繪圖的代碼步驟
1. 獲得圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
2. 拼接路徑
CGContextMoveToPoint(ctx,10,10);
CGContextAddLineToPoint(ctx,100,100);
3. 繪制路徑
CGContextStrokePath(ctx);
CGContextFillPath(ctx);
常用拼接路徑函數(shù)
// 新建一個(gè)起點(diǎn)
void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
// 添加新的線段到某個(gè)點(diǎn)
void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)
// 添加一個(gè)矩形
void CGContextAddRect(CGContextRef c, CGRect rect)
// 添加一個(gè)橢圓
void CGContextAddEllipseInRect(CGContextRef context, CGRect rect)
// 添加一個(gè)圓弧
void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
常用繪制路徑函數(shù)
// Mode參數(shù)決定繪制的模式
void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)
// 繪制空心路徑
void CGContextStrokePath(CGContextRef c)
// 繪制實(shí)心路徑
void CGContextFillPath(CGContextRef c)
PS：一般以CGContextDraw叽赊、CGContextStroke、CGContextFill開頭的函數(shù)必搞，都是用來繪制路徑的
圖形上下文棧的操作
// 將當(dāng)前的上下文copy一份必指，保存到棧頂(圖形上下文棧）
void CGContextSaveGState(CGContextRef c)
// 將棧頂?shù)纳舷挛某鰲＃鎿Q掉當(dāng)前的上下文
void CGContextRestoreGState(CGContextRef c)
矩形操作(transform)
// 縮放
void CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy)
// 旋轉(zhuǎn)
void CGContextRotateCTM(CGContextRef c, CGFloat angle)
// 平移
void CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty)
應(yīng)用實(shí)例
畫直線
// 1.取得一個(gè)跟view相關(guān)聯(lián)的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.描述路徑
UIBezierPath *path = [UIBezierPath bezierPath];
// 2.1. 設(shè)置起點(diǎn)
[path moveToPoint:CGPointMake(10, 100)];
// 2.2. 添加一根線到某個(gè)點(diǎn)
[path addLineToPoint:CGPointMake(200, 20)];
// 把上一條線的終點(diǎn)當(dāng)作是下一條線的起點(diǎn).
[path addLineToPoint:CGPointMake(150, 200)];
// 3.把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
// 4.把上下文的內(nèi)容顯示View fill stroke
CGContextStrokePath(ctx);
設(shè)置上下文的狀態(tài)
//設(shè)置線的寬度
CGContextSetLineWidth(ctx, 10);
//設(shè)置線的連接樣式
CGContextSetLineJoin(ctx, kCGLineJoinBevel);
//設(shè)置頂角的樣式
CGContextSetLineCap(ctx, kCGLineCapRound);
//設(shè)置線的顏色
[[UIColor greenColor] setStroke];
畫曲線
//1.獲取跟View相關(guān)聯(lián)的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
UIBezierPath *path = [UIBezierPath bezierPath];
//2.1設(shè)置起點(diǎn)
[path moveToPoint:CGPointMake(20, 200)];
//2.2添加一條曲線到某個(gè)點(diǎn).
[path addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(100, 10)];
//3.把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
//4.把上下文的內(nèi)容顯示出來.
CGContextStrokePath(ctx);
畫矩形
//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);
畫扇形
//ArcCenter:圓心
//radius:圓的半徑
//startAngle:開始角度//起始點(diǎn)圓的最右側(cè).
//endAngle:截至角度
//clockwise:順時(shí)針還是逆時(shí)針 YES:順時(shí)針 NO:逆時(shí)針
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 endA = -M_PI_2;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:NO];
[path addLineToPoint:center];
//封閉路徑
[path closePath];
//fill,會自動把路徑給關(guān)閉
[path fill];
畫文字
NSString *str = @"Quartz 2D文字渲染";
//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];
畫圖像
//1.加載圖片
UIImage *image = [UIImage imageNamed:@"001"];
//繪制出來的圖片,是保持原來圖片
[image drawAtPoint:CGPointZero];
//把圖片填充到這個(gè)rect當(dāng)中.
[image drawInRect:rect];
//添加裁剪區(qū)域 .把超區(qū)裁剪區(qū)域以外都裁剪掉
UIRectClip(CGRectMake(0, 0, 50, 50));
[image drawAsPatternInRect:self.bounds];
UIRectFill(CGRectMake(10, 10, 100, 100));
圖片水印
// 1.圖片加載
UIImage *image = [UIImage imageNamed:@"卡哇伊"];
//生成圖片.
//size:開開啟一個(gè)多大圖片上下文.
//opaque:不透度
//scale:0
//開啟跟圖片相同的大小上下文.
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0.0);
//把圖片給繪制圖片上下文.
[image drawAtPoint:CGPointZero];
//繪制文字
NSString *str = @"圖片水印";
[str drawAtPoint:CGPointZero withAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:20]}];
//生成圖片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//手動關(guān)閉上下文
UIGraphicsEndImageContext();
self.imageV.image = newImage;
圖片裁剪
//1.加載圖片
UIImage *image = [UIImage imageNamed:@"阿貍頭像"];
//2.生成一個(gè)跟圖片相同大小圖片上下文
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
//3.在上下文添加一個(gè)圓形裁剪區(qū)域
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
//把路徑設(shè)置成裁剪區(qū)域
[path addClip];
//4.把圖片繪制圖片上下文.
[image drawAtPoint:CGPointZero];
//5.生成一張圖片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//6.關(guān)閉圖片上下文.
UIGraphicsEndImageContext();
self.imageV.image = newImage;
