Quartz2D之基本图形绘制

Quartz2D基本图形绘制

• 苹果封装了一套绘图的函数库
• 开发中比较常用的截屏、裁剪、自定义UI控件
• Quartz2D在iOS开发中的价值就是自定义控件

绘图步骤

• 获取上下文
• 创建路径
• 把路径添加到上下文
• 渲染上下文

drawRect:方法中绘制图形

• 因为只有在这个方法中才能获取到图形上下文
• 当这个view要显示的时候才会调用drawRect绘制图形

绘制直线

1、最原始的方法

    //1.获取图形上下文
    // 目前我们所用的上下文都是UIGraphics
    // CGContextRef Ref:引用 CG:目前使用到的类型和函数，一般都是CG开头  CoreGraphics
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2.描述路径
    // 创建路径
    CGMutablePathRef path = CGPathCreateMutable();
    //设置起点
    CGPathMoveToPoint(path, NULL, 50, 50);
    //添加一根线到某个点
    CGPathAddLineToPoint(path, NULL, 200, 100);

    //3. 把路径添加到上下文
    CGContextAddPath(ctx, path);

    //4. 渲染上下文
    CGContextStrokePath(ctx);

2、简单方法

    // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 描述路径
    CGContextMoveToPoint(ctx, 20, 20);
    CGContextAddLineToPoint(ctx, 200, 200);

    CGContextStrokePath(ctx);

3、使用贝塞尔路径

    // 贝塞尔路径
    UIBezierPath *path = [UIBezierPath bezierPath];

    //设置起点
    [path moveToPoint:CGPointMake(10, 20)];

    //添加一根线到某个点
    [path addLineToPoint:CGPointMake(200, 100)];

    //绘制路径
    [path stroke];

绘制两条线、设置属性

1、使用上下文

    // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 描述路径
    CGContextMoveToPoint(ctx , 20, 20);
    CGContextAddLineToPoint(ctx, 100, 50);

    CGContextMoveToPoint(ctx, 100, 50);
    CGContextAddLineToPoint(ctx, 100, 100);

    // 设置绘图状态，一定要在渲染之前
    // 颜色
    [[UIColor redColor] setStroke];

    // 线宽
    CGContextSetLineWidth(ctx, 5);

    // 设置链接样式
    CGContextSetLineJoin(ctx, kCGLineJoinRound);

    // 设置顶角样式
    CGContextSetLineCap(ctx, kCGLineCapRound);

    // 渲染上下文
    CGContextStrokePath(ctx);

2、使用贝塞尔路径

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(200, 200)];

    path.lineWidth = 10;

    [[UIColor redColor] set];
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    [path stroke];

    UIBezierPath *path1 = [UIBezierPath bezierPath];

    [path1 moveToPoint:CGPointMake(0, 0)];

    [path1 addLineToPoint:CGPointMake(30, 60)];
    [[UIColor greenColor] set];
    path1.lineJoinStyle = kCGLineJoinRound;
    path1.lineCapStyle = kCGLineCapRound;
    path1.lineWidth = 3;

    [path1 stroke];

绘制曲线

    // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 描述路径
    // 设置起点
    CGContextMoveToPoint(ctx, 50, 50);

    // cpx：控制点的x
    // cpy：控制点的y
    CGContextAddQuadCurveToPoint(ctx, 200, 300, 250, 50);

    // 渲染上下文
    CGContextStrokePath(ctx);

绘制圆角矩形

    // 圆角矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 200, 200) cornerRadius:20];
    [[UIColor redColor] set];
    // 只画边框
    [path stroke];
    // 填充
    [path fill];

绘制扇形

// 扇形
    // Center：圆心
    // startAngle:弧度
    // clockwise:YES:顺时针 NO：逆时针
    CGPoint center =  CGPointMake(125, 125);
    UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];

    [path1 addLineToPoint:center];
    // 封闭路径，关闭路径：从路径的终点到起点
    //[path1 closePath];
    [path1 stroke];
    //填充：必须是一个完整的封闭路径,默认就会自动关闭路
    [path1 fill];

绘制圆形

    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(1, 1, 100, 100)];
    [path stroke];

注意：drawRect不能手动调用，因为图形上下文我们自己创建不了，只能由系统帮我们创建，并且传递给我们，只能使用下面的方法进行重绘

// 重绘，系统会先创建与view相关联的上下文，然后再调用drawRect
    [self setNeedsDisplay];