Quartz2D是一個(gè)二維繪圖引擎，同時(shí)支持iOS和Mac OS X系統(tǒng)（跨平臺(tái)，純 C語(yǔ)言的）。
Quartz2D提供了以下幾種類(lèi)型的Graphics Context：
- Bitmap Graphics Context
- PDF Graphics Context
- Window Graphics Context
- Layer Graphics Context
- Printer Graphics Context
核心步驟：
獲得上下文
繪制/拼接繪圖路徑
將路徑添加到上下文
渲染上下文
常見(jiàn)使用
- 畫(huà)線(xiàn)（一條線(xiàn)）
//方法1.
//1.獲取圖形上下文
//目前我們所用的上下文都是以UIGraphics
//CGContextRef 引用到的類(lèi)型和函數(shù)都是CG開(kāi)頭献宫，是CoreGraphics框架
CGContextRef cts = UIGraphicsGetCurrentContext();
//2.描述路徑
//2.1創(chuàng)建路徑
CGMutablePathRef path = CGPathCreateMutable();
//2.2設(shè)置起點(diǎn) path:給哪個(gè)路徑設(shè)置起點(diǎn) 第二個(gè)參數(shù)是否形變
CGPathMoveToPoint(path, NULL,50,50);
//2.3添加一根線(xiàn)到某個(gè)點(diǎn)
CGPathAddLineToPoint(path, NULL,200,200);
//3.把路徑添加到上下文
CGContextAddPath(cts,path);
//4.渲染上下文
CGContextStrokePath(cts);
//方法2
//獲取上下文
CGContextRef tes = UIGraphicsGetCurrentContext();
//描述路徑
//設(shè)置起點(diǎn)
CGContextMoveToPoint(tes,50,50);
CGContextAddLineToPoint(tes,200,200);
//渲染
CGContextStrokePath(tes);
//方法三
//貝塞爾路徑
//創(chuàng)建路徑
UIBezierPath *path = [UIBezierPath bezierPath];
//設(shè)置起點(diǎn)
[path moveToPoint:CGPointMake(50,50)];
//添加一根線(xiàn)到某點(diǎn)
[path addLineToPoint:CGPointMake(200,200)];
//繪制路徑
[path stroke];
- 畫(huà)線(xiàn)（兩條）
//方法1
//獲取上下文
CGContextRef cos = UIGraphicsGetCurrentContext();
//繪制路徑
CGContextMoveToPoint(cos,50,50);
CGContextAddLineToPoint(cos,100,100);
//默認(rèn)下一根線(xiàn)的起點(diǎn)就是上一個(gè)線(xiàn)的終點(diǎn)(當(dāng)然如果不想連線(xiàn)的話(huà)就在寫(xiě)一個(gè)起點(diǎn))
CGContextAddLineToPoint(cos,100,200);
//設(shè)置繪圖狀態(tài),要在渲染之前
//顏色
[[UIColor redColor] setStroke];
//線(xiàn)寬
CGContextSetLineWidth(cos,10);
//設(shè)置連接樣式
CGContextSetLineJoin(cos, kCGLineJoinRound);
//設(shè)置頂角樣式
CGContextSetLineCap(cos,kCGLineCapRound);
//渲染上下文
CGContextStrokePath(cos);
//方法2
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20,20)];
[path addLineToPoint:CGPointMake(100,100)];
path.lineWidth = 10;
[[UIColor redColor] set];
[path stroke];
UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(80,80)];
[path1 addLineToPoint:CGPointMake(60,100)];
path1.lineWidth = 10;
[[UIColor orangeColor] set];
[path1 stroke];
//方法3
//獲取上下文
CGContextRef cos = UIGraphicsGetCurrentContext();
//繪制路徑
CGContextMoveToPoint(cos, 80,80);
CGContextAddQuadCurveToPoint(cos, 150,20, 260, 50);
//渲染
CGContextStrokePath(cos);
- 畫(huà)柱狀圖
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 50, 50)];
[path stroke];
- 畫(huà)圓
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20,20,100,100) cornerRadius:50];
[path stroke];
- 畫(huà)圓弧
//圓弧Center是圓心 ，startAngle參數(shù)是弧度 clockwise參數(shù)YES是順時(shí)針NO是逆時(shí)針
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
[path stroke];
- 畫(huà)扇形
CGPoint center = CGPointMake(100, 100);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
//添加一根線(xiàn)到圓心
[path addLineToPoint:center];
//封閉路徑实撒，從路徑的終點(diǎn)到起點(diǎn)
// [path closePath];
//填充姊途，默認(rèn)關(guān)閉路徑
[path fill];
- 畫(huà)餅圖
- (void)drawRect:(CGRect)rect {
NSArray *arr = [self arrRandom];
CGFloat radius = rect.size.width*0.5;
CGPoint center = CGPointMake(radius,radius);
CGFloat startA = 0;
CGFloat angle = 0;
CGFloat endA = 0;
for (int i =0;i < arr.count;i ++) {
startA = endA;
angle = [arr[i] doubleValue]/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 colorRandom] set];
[path fill];
}
}
- (NSArray*)arrRandom{
int totoal = 100;
NSMutableArray *arr = [NSMutableArray array];
int temp = 0;
for (int i=0;i <arc4random_uniform(10)+1;i ++) {
temp = arc4random_uniform(totoal)+1;
[arr addObject:@(temp)];
//一個(gè)100 一次10 二次60 40 三次 30
if (temp == totoal) {
break;
}
totoal -= temp;
}
return arr;
}
- (UIColor*)colorRandom{
//0~255 RGB
//OC 0~1
CGFloat r = arc4random_uniform(256)/255.0;
CGFloat g = arc4random_uniform(256)/255.0;
CGFloat b = arc4random_uniform(256)/255.0;
return [UIColor colorWithRed:r green:g blue:b alpha:1];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self setNeedsDisplay];
}
#pragma mark - 笨的方法
- (void)draw{
CGFloat radius = self.bounds.size.width*0.5;
CGPoint center = CGPointMake(radius,radius);
CGFloat startA = 0;
CGFloat angle = 0;
CGFloat endA = 0;
//第一個(gè)扇形
angle = 25/100.0 * M_PI * 2;
endA = startA + angle;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
//添加一條線(xiàn)到圓心
[path addLineToPoint:center];
//描邊和填充通用
[[UIColor redColor] set];
[path fill];
//第二個(gè)扇形
startA = endA;
angle = 25/100.0 * M_PI * 2;
endA = startA + angle;
UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
//添加一條線(xiàn)到圓心
[path1 addLineToPoint:center];
//描邊和填充通用
[[UIColor greenColor] set];
[path1 fill];
//第三個(gè)扇形
startA = endA;
angle = 50/100.0 * M_PI * 2;
endA = startA + angle;
UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
//添加一條線(xiàn)到圓心
[path2 addLineToPoint:center];
//描邊和填充通用
[[UIColor blueColor] set];
[path2 fill];
}
實(shí)際開(kāi)發(fā)常用
- 圖片水印效果
UIImage *img = [UIImage imageNamed:@"Default-667h"];
//0.獲取上下文（注意UIGraphicsGetCurrentContext()z在drawRectf方法中）
//開(kāi)啟一個(gè)位圖上下文 參數(shù)1：新圖片尺寸 2：不透明度YES不透明通常透明 3：縮放上下文取值0不縮放
UIGraphicsBeginImageContextWithOptions(img.size, NO,0);
//1.繪制原生的圖片
[img drawAtPoint:CGPointZero];
//2.給原生的圖片添加文字
NSString *str = @"Hello";
[str drawAtPoint:CGPointMake(400,1000) withAttributes:@{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:40]}];
//3.生成一張新的圖片 從上下文獲取圖片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//4.關(guān)閉上下文
UIGraphicsEndImageContext();
self.imgView.image = newImage;
- 裁剪圖片
//圖片寬
CGFloat imgWidth = image.size.width;
//圖形的寬度和高度
CGFloat ovalWH = imgWidth + 2 * borderWidth;
//1.開(kāi)啟上下文
UIGraphicsBeginImageContextWithOptions(CGSizeMake(ovalWH, ovalWH), NO, 0);
//2.畫(huà)大圖
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0, ovalWH, ovalWH)];
[[UIColor redColor] set];
[path fill];
//3.設(shè)置裁剪區(qū)域
UIBezierPath *path1 =[UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderWidth,borderWidth, imgWidth,imgWidth)];
[path1 addClip];
//4.繪制圖片
[image drawAtPoint:CGPointMake(borderWidth,borderWidth)];
//5.獲取圖片
UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
//6.關(guān)閉上下文
UIGraphicsEndImageContext();
self.imgView.image = newImage;
- 屏幕截圖
//1.獲取位圖上下文
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size,NO,0);
//2.開(kāi)啟上下文
CGContextRef ref = UIGraphicsGetCurrentContext();
// 3.把控件上的圖層渲染到上下文,layer只能渲染
[self.view.layer renderInContext:ref];
//4.生成一張圖片
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
//5.關(guān)閉上下文
UIGraphicsEndImageContext();
// compressionQuality： 圖片質(zhì)量 1:最高質(zhì)量
NSData *data = UIImageJPEGRepresentation(img,1);
//6.將圖片寫(xiě)入
[data writeToFile:[[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,YES)lastObject]stringByAppendingPathComponent:@"shopDetailAddImg"] atomically:YES];
//7.讀取
NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)lastObject]stringByAppendingPathComponent:@"shopDetailAddImg"];
[UIImage imageWithContentsOfFile:path];
補(bǔ)充
drawRect方法
繪圖只有實(shí)現(xiàn)drawRect:方法才能繪圖到view上，因?yàn)橹挥欣锩婵梢垣@取view中l(wèi)ayer的上下文奈惑。
