iOS 画线（曲线、虚线、直线）

什么是Quartz2D

• Quartz2D是一个二维绘图引擎，同时支持iOS和Mac系统
• Quartz2D能做什么
  
  • 绘制图形：线条、三角形、矩形、圆、弧等
  • 绘制文字
  • 绘制、生成图片（图像）
  • 读取、生成PDF
  • 截图、剪裁图片
  • 自定义UI控件

什么是图形上下文（Graphics Context）

• 可以理解为就是一个画板。其结构是一个CGCOntextRef类型的数据结构
• 作用：保存绘图信息、绘图状态，决定绘制的输出目标（PDF、图片等）
• 相同的一套绘图系列，制定了不同的Graphics Context,就可将相同的图像绘制到不同的目标上
• Quartz2D提供几种类型的Graphics Context
  
  • bit（位图上下文）
  • pdf
  • 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)