iOS绘图_Quartz 2D基础

1.Quartz 2D简介

Quartz 2D是iOS中的绘图框架，他是基于Core Graphics框架的，是一个强大的二维图像绘制引擎。我们平时用到的UIKit组件都是由Core Graphics进行绘制的。不仅如此，当我们引入UIKit框架时会自动引入Core Graphics框架。

2.图形上下文

图形上下文：绘制需要一个图形上下文来保存用户绘制的内容，说白了，就是一块画布。

3.DrawRect方法

• 只有在 DrawRect 方法当中才能取得和view相关联的图形上下文
• DrawRect 是系统自己调用的, 它是当View显示的时候自动调用。如果需要重绘，不能直接调用 DrawRect，需要调用 setNeedsDisplay 或者 setNeedsDisplayInRect 触发 DrawRect
• 通过设置contentMode属性值为UIViewContentModeRedraw，那么将在每次设置或更改frame的时候自动调用 DrawRect 方法重绘
• UIImageView子类重写 DrawRect 方法无效。

4.绘制基本流程

• 获取上下文
  
  • UIGraphicsGetCurrentContext()
• 设置上下文状态
  
  • CGContextSetRGBStrokeColor 设置画笔颜色
  • CGContextSetRGBFillColor 设置填充颜色
  • CGContextSetLineWidth 设置线宽
  • CGContextSetLineCap 设置边帽
• 设置绘制路径
  
  • CGContextMoveToPoint 画笔移动至某点
  • CGContextAddLineToPoint 添加一条线至某点
  • CGContextAddRect 添加一个矩形
  • CGContextAddEllipseInRect 根据矩形添加圆
  • CGContextAddArc 添加一段弧线
  • CGContextAddCurveToPoint 画一段曲线
  • CGContextAddPath 添加一个路径
• 绘制路径至上下文
  
  • CGContextStrokePath
  • CGContextFillPath 填充路径
  • CGContextDrawImage 画图片

5.绘制基本图形

1.画一条线

自定义一个UIView子类

#import "LLView.h"

@implementation LLView

-(void)drawRect:(CGRect)rect{
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self drawLineInContect:context];

}
-(void)drawLineInContect:(CGContextRef )context{
    //设置画笔颜色
    CGContextSetStrokeColorWithColor(context, [UIColor cyanColor].CGColor);
    //设置线宽
    CGContextSetLineWidth(context, 20);
    //设置边帽
    CGContextSetLineCap(context, kCGLineCapRound);
    //画笔移动至某点
    CGContextMoveToPoint(context, 50, 100);
    //画一条线至某点
    CGContextAddLineToPoint(context, 300, 200);

    CGContextStrokePath(context);
}

@end

2.一个矩形

-(void)drawRect:(CGRect)rect{
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self drawRectInContect:context];

}

-(void)drawRectInContect:(CGContextRef )context{
    //画笔颜色
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    //设置线宽
    CGContextSetLineWidth(context, 10);
    //画矩形
    CGContextAddRect(context, CGRectMake(50, 50, 100, 50));
//    //填充颜色
//    CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
//    //设置填充路径
//    CGContextFillPath(context);
    //绘制
    CGContextStrokePath(context);

}

3.画一个圆

-(void)drawRect:(CGRect)rect{
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self drawCircleIncontext:context];
}

- (void)drawCircleIncontext:(CGContextRef )context
{
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
    CGContextSetLineWidth(context, 5.);
    CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
    //画一个圆
    CGContextAddEllipseInRect(context, CGRectMake(100, 200, 100, 100));
    //给一个圆填充颜色
    CGContextFillEllipseInRect(context, CGRectMake(100, 200, 100, 100));
    CGContextStrokePath(context);
}

4.画一根弧线

- (void)drawArcIncontext:(CGContextRef )context
{
    CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
    CGContextSetLineWidth(context, 10);

    /*
     参数：1.context 2.圆心点坐标x 3.圆心点坐标y 4.半径 5.开始角度 用弧度表示 6.结束角度 弧度 7.是否为顺时针 0逆时针 1顺时针
     */
    CGContextAddArc(context, 200, 400, 100, 0, M_PI, 1);

    CGContextStrokePath(context);
}