Quartz2D绘图详解-优快云博客

1. Quartz2D简介

Quartz2D是一个二维绘图引擎，同时支持iOS和Mac OS
Quartz2D能完成的工作有：
- 绘制图形：线条、三角形、矩形、圆、弧等
- 绘制文字
- 绘制图片（图像）
- 读取\生成PDF
- 截图\裁剪图片
- 自定义UI控件
- ......

2.基本图形绘制

以下方法均在drawRect方法中才生效

/**
 *  绘图的步骤： 1.获取上下文 2.创建路径（描述路径） 3.把路径添加到上下文 4.渲染上下文
 *  通常在这个方法里面绘制图形
 *  为什么要再drawRect里面绘图，因为只有在这个方法里面才能获取到跟View的layer相关联的图形上下文
 * 什么时候调用:当这个View要显示的时候才会调用drawRect绘制图形，
 *
 *  @param rect rect是当前控件的bounds
 */
- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    }

2.1 最原始的绘制方式－第一种方式

    // 1.获取图形上下文
    // 目前我们所用的上下文都是UIGraphics
    // CGContextRef Ref：引用 
    // CG : CoreGraphics的两个字母，目前使用到的类型和函数一般都以CG开头
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.描述路径
    // 创建路径
    CGMutablePathRef path = CGPathCreateMutable();
    
    // 设置起点
    // path：给哪个路径设置起点
    CGPathMoveToPoint(path, NULL, 50, 50);
    
    // 添加一根线到某个点
    CGPathAddLineToPoint(path, NULL, 200, 200);
    
    // 3.把路径添加到上下文
    CGContextAddPath(ctx, path);
    
    // 4.渲染上下文
    CGContextStrokePath(ctx);

2.2 绘图的第二种方式

    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.描述路径
    // 设置起点
    CGContextMoveToPoint(ctx, 50, 50);
    
    CGContextAddLineToPoint(ctx, 200, 200);
    
    // 3.渲染上下文
    CGContextStrokePath(ctx);

2.3 绘图的第三种方式

// UIKit已经封装了一些绘图的功能
    
    // 贝瑟尔路径
    
    // 1.创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    // 2.设置起点
    [path moveToPoint:CGPointMake(50, 50)];
    
    // 3.添加一根线到某个点
    [path addLineToPoint:CGPointMake(200, 200)];
    
    // 4.绘制路径
    [path stroke];

2.4 上下文的状态

// 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 描述路径
    //起点
    CGContextMoveToPoint(ctx, 50, 50);
    
    CGContextAddLineToPoint(ctx, 100, 50);
    
    // 设置起点
    CGContextMoveToPoint(ctx, 180, 60);
    
    // 默认下一根线的起点就是上一根线终点
    CGContextAddLineToPoint(ctx, 100, 200);
    
    // 设置绘图状态,一定要在渲染之前
    // 颜色
    [[UIColor redColor] setStroke];
    
    // 线宽
    CGContextSetLineWidth(ctx, 20);
    
    // 设置连接样式
//    kCGLineJoinMiter,
//    kCGLineJoinRound,
//    kCGLineJoinBevel
    CGContextSetLineJoin(ctx, kCGLineJoinMiter);

    // 设置顶角样式
//    kCGLineCapButt,
//    kCGLineCapRound,
//    kCGLineCapSquare
    CGContextSetLineCap(ctx, kCGLineCapRound);
    
    
    // 渲染上下文
    CGContextStrokePath(ctx);

2.5 一条线对应一条路径，可以为不同的线设置不同的属性

UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    
    [path addLineToPoint:CGPointMake(200, 200)];
    
    
    path.lineWidth = 10;
    [[UIColor redColor] set];
    
    [path stroke];
    
    UIBezierPath *path1 = [UIBezierPath bezierPath];
    
    [path1 moveToPoint:CGPointMake(0, 0)];
    
    [path1 addLineToPoint:CGPointMake(30, 60)];
    [[UIColor greenColor] set];
    
    path1.lineWidth = 3;
    
    [path1 stroke];

效果图：

2.6 绘制圆弧

 // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 描述路径
    // 设置起点
    CGContextMoveToPoint(ctx, 50, 50);
    
    // cpx:控制点的x
    CGContextAddQuadCurveToPoint(ctx, 150, 20, 250, 50);
    
    
    // 渲染上下文
    CGContextStrokePath(ctx);

效果图：

2.7 绘制圆

  // 圆角矩形
//   UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 200, 200) cornerRadius:100];
    
    
    // 圆弧
    // Center：圆心
    // startAngle:弧度
    // clockwise:YES:顺时针 NO：逆时针
    
    // 扇形
    CGPoint center = CGPointMake(125, 125);
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
    
    // 添加一根线到圆心
    [path addLineToPoint:center];
    
    // 封闭路径，关闭路径：从路径的终点到起点
    //    [path closePath];
    
    
    [path stroke];
    
    // 填充：必须是一个完整的封闭路径,默认就会自动关闭路径
    [path fill];