iOS绘图(二)：概念详解及绘图步骤

本章的内容有两个：

• 通过代码详细解读上篇文章iOS绘图(一)里面的概念。
• 绘图的步骤

概念详解

1. 首先在storyboard中拖一个视图，设置蓝色的背景颜色，宽高为300、300，创建一个类关联storyboard中的视图。

   显示结果如下：

   
   
   Simulator Screen Shot - iPhone 8 Plus - 2018-06-09 at 19.31.57.png

2. 添加绘图代码：

// 重写系统的drawRect方法，这个系统方法在后面会详细讲解
// 这里只需知道，view显示时，系统会自动调这个方法
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    // 获取layer类型的上下文(草稿纸)，上下文是CGContextRef类型的
    // UIGraphicsGetCurrentContext这个函数，获取到的上下文是layer类型的上下文，决定了输出目标只能是UIView中的layer， 不能是其它类型的上下文。
    CGContextRef context = UIGraphicsGetCurrentContext();

    // 初学者先不要管这两个函数什么意思，后面会详细讲解，这里只需要知道功能是
    // 绘制一条直线到上下文(草稿纸)中---这个直线就是绘图路径
    CGContextMoveToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 200, 100);

    // 设置绘图状态：颜色为红色
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    // 设置绘图状态：线宽为5
    CGContextSetLineWidth(context, 5);
    
    // 把上下文(草稿纸)里面的绘图路径渲染到view上面---输出目标是view
    CGContextStrokePath(context);

}

显示结果如下：

Simulator Screen Shot - iPhone 8 Plus - 2018-06-09 at 20.04.45.png

绘图步骤

绘图万变不离其宗的一点就是它的步骤
1. 获取上下文
2. 画绘图路径
3. 把绘图路径渲染到输出目标

代码讲解如下：

// 重写系统的drawRect方法，这个系统方法在后面会详细讲解
// 这里只需知道，view显示时，系统会自动调这个方法
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    // 1. 获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();

    // 2. 画绘图路径
    CGContextMoveToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 200, 100);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 5);
    
    // 3. 把绘图路径渲染到输出目标
    CGContextStrokePath(context);

}

其中的第二步可以分为两种情况：

• 直接在上下文(草稿纸)上画绘图路径，再渲染到输出目标
• 先把绘图路径画好，再把绘图路径添加到上下文(草稿纸)中，再把上下文中的绘图路径渲染到输出目标

上面的代码就属于直接在上下文上画绘图路径。
下面的代码属于把绘图路径画好，再添加到上下文(草稿纸)中，再渲染到输出目标：

// 重写系统的drawRect方法，这个系统方法在后面会详细讲解
// 这里只需知道，view显示时，系统会自动调这个方法
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    // 1. 获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 2. 画绘图路径
    // 创建绘图路径
    CGMutablePathRef path = CGPathCreateMutable();
    // 画一条直线到绘图路径
    CGPathMoveToPoint(path, NULL, 100, 100);
    CGPathAddLineToPoint(path, NULL, 200, 100);
    
    // 把绘图路径添加到上下文中
    CGContextAddPath(context, path);
    
    // 设置绘图状态：颜色为红色
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    // 设置绘图状态：线宽为5
    CGContextSetLineWidth(context, 5);
    
    // 3. 把绘图路径渲染到输出目标
    CGContextStrokePath(context);

}

运行效果跟上面的一模一样， 但是绘图步骤不同。

这篇文章就写到这里。