什么是Quartz2D
- Quartz2D是一个二维绘图引擎,同时支持iOS和Mac系统
- Quartz2D能做什么
- 绘制图形:线条、三角形、矩形、圆、弧等
- 绘制文字
- 绘制、生成图片(图像)
- 读取、生成PDF
- 截图、剪裁图片
- 自定义UI控件
什么是图形上下文(Graphics Context)
- 可以理解为就是一个画板。其结构是一个CGCOntextRef类型的数据结构
- 作用:保存绘图信息、绘图状态,决定绘制的输出目标(PDF、图片等)
- 相同的一套绘图系列,制定了不同的Graphics Context,就可将相同的图像绘制到不同的目标上
- Quartz2D提供几种类型的Graphics Context
- bit(位图上下文)
- window
- layer(自定义view)
如何利用Quartz2D绘制东西到View上
- 建立图形上下文用来保存绘图信息
- 图形上下文必须和View相关联,这样才能将内容画在View上面
- 自定义View步骤
- 建立一个类,继承自UIView
- 实现- (void)drawRect:(CGRect)rect方法
- 只有drawRect这个方法里面才能获取到跟View的layer相关的图形上下文
- 绘制相应内容
- 利用图形上下文将绘制的内容渲染显示到View上
- 绘图步骤
- 获取上下文
- 创建路径
- 把路径添加到上下文
- 渲染上下文
- 这里用三种方式实现画直线
//需要创建路径
-(void)drawLine1{
//1、获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、描述路径
//创建路径
CGMutablePathRef path = CGPathCreateMutable();
//设置起点
CGPathMoveToPoint(path, NULL, 50, 150);
//设置终点
CGPathAddLineToPoint(path, NULL, 100, 100);
//颜色
[[UIColor redColor] setStroke];
//线宽
CGContextSetLineWidth(ctx, 20.0);
//设置连接样式
CGContextSetLineJoin(ctx, kCGLineJoinBevel);
//设置顶角样式
CGContextSetLineCap(ctx, kCGLineCapButt);
//3、把路径添加到上下文
CGContextAddPath(ctx, path);
//4、渲染上下文到View的layer
CGContextStrokePath(ctx);
}
//不需要创建路径
-(void)drawLine2{
//1、获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、描述路径(底层封装路径)
CGContextMoveToPoint(ctx, 50, 50);
CGContextAddLineToPoint(ctx , 200, 200);
//3、渲染上下文到View的layer
CGContextStrokePath(ctx);
}
//BezierPath已经封装好了
-(void)drawLine3{
//贝瑟尔路径
//1、创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
//2、设置起点
[path moveToPoint:CGPointMake(50, 50)];
//设置终点
[path addLineToPoint:CGPointMake(200, 100)];
[path setLineWidth:10.0];
[path setLineJoinStyle:kCGLineJoinBevel];
[path setLineCapStyle:kCGLineCapButt];
//3、渲染上下文到View的layer
[path stroke];
}
- 这里用三种方式实现画曲线
-(void)drawCurve1{
//1、获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、描述路径
CGContextMoveToPoint(ctx, 50, 50);
//cpx(150),cpy(200)指的是控制点坐标
CGContextAddQuadCurveToPoint(ctx, 150, 200, 250, 50);
//3、渲染上下文
CGContextStrokePath(ctx);
}
-(void)drawCurve2{
//1、获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、描述路径(底层封装路径)
CGContextMoveToPoint(ctx, 50, 50);
CGContextAddQuadCurveToPoint(ctx, 150, 200, 250, 50);
//3、渲染上下文到View的layer
CGContextStrokePath(ctx);
}
-(void)drawCurve3{
//贝瑟尔路径
//1、创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
//2、设置起点
[path moveToPoint:CGPointMake(50, 50)];
//设置终点
[path addQuadCurveToPoint:CGPointMake(250, 50) controlPoint:CGPointMake(150, 200)];
//3、渲染上下文到View的layer
[path stroke];
}
注:若要在一个View上画不同的线且每个线的颜色、宽度、样式不同,要创建不同的上下文
-(void)drawLine3{
//1、创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
//2、设置起点
[path moveToPoint:CGPointMake(50, 50)];
//设置终点
[path addLineToPoint:CGPointMake(200, 100)];
[path setLineWidth:10.0];
[path setLineJoinStyle:kCGLineJoinBevel];
[path setLineCapStyle:kCGLineCapButt];
[[UIColor redColor] setStroke];
//3、渲染上下文到View的layer
[path stroke];
//1、创建路径
UIBezierPath *path1 = [UIBezierPath bezierPath];
//2、设置起点
[path1 moveToPoint:CGPointMake(150, 150)];
//设置终点
[path1 addLineToPoint:CGPointMake(210, 110)];
[path1 setLineWidth:5.0];
[path1 setLineJoinStyle:kCGLineJoinRound];
[path1 setLineCapStyle:kCGLineCapRound];
[[UIColor yellowColor] setStroke];
//3、渲染上下文到View的layer
[path1 stroke];
}
- 画虚线
-(void)drawDottedLine{
CAShapeLayer *dotteShapeLayer = [CAShapeLayer layer];
CGMutablePathRef dotteShapePath = CGPathCreateMutable();
//设置虚线颜色为blackColor
[dotteShapeLayer setStrokeColor:[[UIColor orangeColor] CGColor]];
//设置虚线宽度
dotteShapeLayer.lineWidth = 2.0f ;
//10=线的宽度 5=每条线的间距
NSArray *dotteShapeArr = [[NSArray alloc] initWithObjects:[NSNumber numberWithInt:10],[NSNumber numberWithInt:5], nil];
[dotteShapeLayer setLineDashPattern:dotteShapeArr];
CGPathMoveToPoint(dotteShapePath, NULL, 50 ,50);
CGPathAddLineToPoint(dotteShapePath, NULL, 100, 100);
[dotteShapeLayer setPath:dotteShapePath];
CGPathRelease(dotteShapePath);
//把绘制好的虚线添加上来
[self.layer addSublayer:dotteShapeLayer];
}
最后,附上相关的demo,Git:(https://github.com/hejiasu/Drawing)