本章的内容有两个：
- 通过代码详细解读上篇文章iOS绘图(一)里面的概念。
- 绘图的步骤
概念详解
-
首先在storyboard中拖一个视图，设置蓝色的背景颜色，宽高为300、300，创建一个类关联storyboard中的视图。
显示结果如下：
Simulator Screen Shot - iPhone 8 Plus - 2018-06-09 at 19.31.57.png 添加绘图代码：
// 重写系统的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);
}
运行效果跟上面的一模一样， 但是绘图步骤不同。
这篇文章就写到这里。
