Quartz2D是一个二维绘图引擎，同时支持iOS和Mac OS X系统（跨平台，纯 C语言的）。
Quartz2D提供了以下几种类型的Graphics Context：
- Bitmap Graphics Context
- PDF Graphics Context
- Window Graphics Context
- Layer Graphics Context
- Printer Graphics Context
核心步骤：
获得上下文
绘制/拼接绘图路径
将路径添加到上下文
渲染上下文
常见使用
- 画线（一条线）
//方法1.
//1.获取图形上下文
//目前我们所用的上下文都是以UIGraphics
//CGContextRef 引用到的类型和函数都是CG开头，是CoreGraphics框架
CGContextRef cts = UIGraphicsGetCurrentContext();
//2.描述路径
//2.1创建路径
CGMutablePathRef path = CGPathCreateMutable();
//2.2设置起点 path:给哪个路径设置起点 第二个参数是否形变
CGPathMoveToPoint(path, NULL,50,50);
//2.3添加一根线到某个点
CGPathAddLineToPoint(path, NULL,200,200);
//3.把路径添加到上下文
CGContextAddPath(cts,path);
//4.渲染上下文
CGContextStrokePath(cts);
//方法2
//获取上下文
CGContextRef tes = UIGraphicsGetCurrentContext();
//描述路径
//设置起点
CGContextMoveToPoint(tes,50,50);
CGContextAddLineToPoint(tes,200,200);
//渲染
CGContextStrokePath(tes);
//方法三
//贝塞尔路径
//创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
//设置起点
[path moveToPoint:CGPointMake(50,50)];
//添加一根线到某点
[path addLineToPoint:CGPointMake(200,200)];
//绘制路径
[path stroke];
- 画线（两条）
//方法1
//获取上下文
CGContextRef cos = UIGraphicsGetCurrentContext();
//绘制路径
CGContextMoveToPoint(cos,50,50);
CGContextAddLineToPoint(cos,100,100);
//默认下一根线的起点就是上一个线的终点(当然如果不想连线的话就在写一个起点)
CGContextAddLineToPoint(cos,100,200);
//设置绘图状态,要在渲染之前
//颜色
[[UIColor redColor] setStroke];
//线宽
CGContextSetLineWidth(cos,10);
//设置连接样式
CGContextSetLineJoin(cos, kCGLineJoinRound);
//设置顶角样式
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);
- 画柱状图
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 50, 50)];
[path stroke];
- 画圆
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20,20,100,100) cornerRadius:50];
[path stroke];
- 画圆弧
//圆弧Center是圆心 ，startAngle参数是弧度 clockwise参数YES是顺时针NO是逆时针
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
[path stroke];
- 画扇形
CGPoint center = CGPointMake(100, 100);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
//添加一根线到圆心
[path addLineToPoint:center];
//封闭路径，从路径的终点到起点
// [path closePath];
//填充，默认关闭路径
[path fill];
- 画饼图
- (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)];
//一个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;
//第一个扇形
angle = 25/100.0 * M_PI * 2;
endA = startA + angle;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
//添加一条线到圆心
[path addLineToPoint:center];
//描边和填充通用
[[UIColor redColor] set];
[path fill];
//第二个扇形
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];
//添加一条线到圆心
[path1 addLineToPoint:center];
//描边和填充通用
[[UIColor greenColor] set];
[path1 fill];
//第三个扇形
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];
//添加一条线到圆心
[path2 addLineToPoint:center];
//描边和填充通用
[[UIColor blueColor] set];
[path2 fill];
}
实际开发常用
- 图片水印效果
UIImage *img = [UIImage imageNamed:@"Default-667h"];
//0.获取上下文（注意UIGraphicsGetCurrentContext()z在drawRectf方法中）
//开启一个位图上下文 参数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.关闭上下文
UIGraphicsEndImageContext();
self.imgView.image = newImage;
- 裁剪图片
//图片宽
CGFloat imgWidth = image.size.width;
//图形的宽度和高度
CGFloat ovalWH = imgWidth + 2 * borderWidth;
//1.开启上下文
UIGraphicsBeginImageContextWithOptions(CGSizeMake(ovalWH, ovalWH), NO, 0);
//2.画大图
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0, ovalWH, ovalWH)];
[[UIColor redColor] set];
[path fill];
//3.设置裁剪区域
UIBezierPath *path1 =[UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderWidth,borderWidth, imgWidth,imgWidth)];
[path1 addClip];
//4.绘制图片
[image drawAtPoint:CGPointMake(borderWidth,borderWidth)];
//5.获取图片
UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
//6.关闭上下文
UIGraphicsEndImageContext();
self.imgView.image = newImage;
- 屏幕截图
//1.获取位图上下文
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size,NO,0);
//2.开启上下文
CGContextRef ref = UIGraphicsGetCurrentContext();
// 3.把控件上的图层渲染到上下文,layer只能渲染
[self.view.layer renderInContext:ref];
//4.生成一张图片
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
//5.关闭上下文
UIGraphicsEndImageContext();
// compressionQuality： 图片质量 1:最高质量
NSData *data = UIImageJPEGRepresentation(img,1);
//6.将图片写入
[data writeToFile:[[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,YES)lastObject]stringByAppendingPathComponent:@"shopDetailAddImg"] atomically:YES];
//7.读取
NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)lastObject]stringByAppendingPathComponent:@"shopDetailAddImg"];
[UIImage imageWithContentsOfFile:path];
补充
drawRect方法
绘图只有实现drawRect:方法才能绘图到view上，因为只有里面可以获取view中layer的上下文。
