iOS quartzCore学习之Quartz 2D绘图 基本图形

在iOS中常用的绘图框架就是Quartz 2D，Quartz 2D是Core Graphics框架的一部分，是一个强大的二维图像绘制引擎。Quartz 2D在UIKit中也有很好的封装和集成，我们日常开发时所用到的UIKit中的组件都是由Core Graphics进行绘制的。不仅如此，当我们引入UIKit框架时系统会自动引入Core Graphics框架，并且为了方便开发者使用在UIKit内部还对一些常用的绘图API进行了封装。

在iOS中绘图一般分为以下几个步骤：

1.获取绘图上下文

2.创建并设置路径

3.将路径添加到上下文

4.设置上下文状态

5.绘制路径

6.释放路径

图形上下文CGContextRef代表图形输出设备（也就是绘制的位置），包含了绘制图形的一些设备信息，Quartz 2D中的所有对象最终都必须绘制到图形上下文。这样一来，我们在绘制图形时就不必关心具体的设备信息，统一了代码编写方式（在Quartz 2D中的绘图上下文可以是位图Bitmap、PDF、窗口Window、层Layer、打印对象Printer）。

基本图形绘制

在UIKit中默认已经为我们准备好了一个图形上下文对象，在UI控件的drawRect:方法（这个方法在loadView、viewDidLoad方法后执行）中我们可以通过UIKit封装函数UIGraphicsGetCurrentContext()方法获得这个图形上下文(注意在其他UI控件方法中无法取得这个对象)，然后我们只要按照绘图步骤一步步执行即可。

// 1. 获取绘图的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 2. 创建并设置路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, nil, 20, 50);     // 移动到指定位置 （这是起始点）
    CGPathAddLineToPoint(path, nil, 20, 100); // 绘制直线
    CGPathAddLineToPoint(path, nil, 300, 100);// 绘制直线
    // 3. 添加绘图路径到上下文
    CGContextAddPath(context, path);
    // 4. 设置图形上下文状态属性
    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1);
    CGContextSetRGBFillColor(context, 0, 1.0, 0, 1);
    CGContextSetLineWidth(context, 1.5);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineJoin(context, kCGLineJoinRound);
    
    // 设置虚线样式
    /**
     * context 图形上线问
     * phase   虚线开始位置
     * lengths 虚线长度问题
     * count   虚线数组元素个数
     */
    CGFloat lengths[2] = {18,9};
    CGContextSetLineDash(context, 0, lengths, 2);
    /**  设置阴影
     */
    CGColorRef color = [UIColor grayColor].CGColor;
    CGContextSetShadowWithColor(context, CGSizeMake(2, 2), 0.8, color);
    
    // 5. 绘制图像到指定图形上下文
    CGContextDrawPath(context, kCGPathFillStroke);
    
    // 6. 释放对象
    CGPathRelease(path);

运行效果如下：

 

简化绘图方式

上面的绘图方式未免显得有些麻烦，其实Core Graphics 内部对创建对象添加到上下文这两步操作进行了封装，可以一步完成。另外前面也说过UIKit内部其实封装了一些以“UI”开头的方法帮助大家进行图形绘制。就拿前面的例子来说我们改进一些绘制方法：

- (void)drawLine2{
    // 1. 获取图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 2. 设置绘制路径
    CGContextMoveToPoint(context, 20, 50);
    CGContextAddLineToPoint(context, 20, 100);
    CGContextAddLineToPoint(context, 300, 100);
    CGContextClosePath(context);
    // 3. 设置图像上下文属性
    [[UIColor redColor] setStroke];
    [[UIColor grayColor]setFill];
    // 绘制录路径
    CGContextDrawPath(context, kCGPathFillStroke);
}

上面的操作相比前面的方法应该说已经简化了不少，除了路径之外其他矩形、椭圆等都有对应的创建方法。另外上面我们也演示了封闭路径的方法，大家可以运行看一下效果。

其他图形绘制

相信大家了解了上面的绘制步骤其他图形绘制并不麻烦，下面以一个例子简单演示一下其他图形的绘制，包括文字和图像的绘制。

绘制矩形

- (void)drawRectWithcontext:(CGContextRef)context{
    // 1. 添加绘制路径
    CGRect rect = CGRectMake(20, 50, 300, 40);
    CGContextAddRect(context, rect);
    // 2. 设置图像上下文属性
    [[UIColor blueColor]setStroke];
    // 3 绘制录路径
    CGContextDrawPath(context, kCGPathFillStroke);
}

运行效果：

绘制椭圆

- (void)drawEllipseWithcontext:(CGContextRef)context{
    CGRect rect=CGRectMake(50, 50, 220.0, 200.0);
    CGContextAddEllipseInRect(context, rect);
    //设置属性
    [[UIColor purpleColor]set];
    //绘制
    CGContextDrawPath(context, kCGPathFillStroke);
}

运行效果

绘制弧形

- (void)drawArcWithContext:(CGContextRef)context{
    CGContextAddArc(context, 100, 100, 80, 0, M_PI*0.2, 0);
    //设置属性
    [[UIColor purpleColor]set];
    //绘制
    CGContextDrawPath(context, kCGPathFillStroke);
}

 

运行效果：

 绘制曲线

CGContextMoveToPoint(context, 20, 100);
    // 添加控制点
    CGContextAddQuadCurveToPoint(context, 160, 0, 300, 100);
    CGContextMoveToPoint(context, 20, 500);
    // 添加控制点
    CGContextAddCurveToPoint(context, 80, 300, 240, 500, 300, 300);
    
    //设置图形上下文属性
    [[UIColor yellowColor]setFill];
    [[UIColor redColor]setStroke];
    
    
    //绘制路径
    CGContextDrawPath(context, kCGPathFillStroke);

运行效果如下：