Core Graphics的使用-涂鸦板

前言

Core Graphics是一套基于C的API框架，使用了Quartz作为绘图引擎，作为矢量绘图框架，它功能非常强大，API功能齐全。API功能齐全也就代表着API的数量巨大，写起来代码逻辑很复杂。

在平时开发中，其实UIKit是我们最容易也是最常接触到的框架。绝大多数图形界面都由UIKit完成。但是UIKit依赖于Core Graphics框架，也是基于Core Graphics框架实现的。如果想要完成某些更底层的功能或者追求极致的性能，那么依然推荐使用Core Graphics完成。

Core Graphics和UIKit在实际使用中也存在以下这些差异:

• Core Graphics其实是一套基于C的API框架，使用了Quartz作为绘图引擎。这也就意味着Core Graphics不是面向对象的。

• Core Graphics需要一个图形上下文（Context）。所谓的图形上下文（Context），说白了就是一张画布。这一点非常容易理解，Core Graphics提供了一系列绘图API，自然需要指定在哪里画图。因此很多API都需要一个上下文（Context）参数。
• Core Graphics的图形上下文（Context）是堆栈式的。只能在栈顶的上下文（画布）上画图。
• Core Graphics中有一些API，名称不同却有着相似的功能，新手只需要掌握一种，并能够看懂其他的即可。

在本文中主要是使用Core Graphics实现涂鸦板的功能。

---

一款实用的涂鸦板

---

首先看一下具体实现的功能

自定义RGB调整画板背景颜色和画笔颜色，也可以选择相册图片设置为背景图片，可以自定义调整画笔宽度，带有撤销、清除、保存、保存到相册功能 -> Demo

RGB -> 修改画板、画笔颜色
画笔宽度 -> 修改画笔的宽度
撤销 -> 撤销前一步的操作
清除 -> 清除画板内所有内容
保存 -> 保存当前图片
图片 -> 打开手机相册选取图片作为背景
保存相册 -> 把之前保存的图片全部写入手机相册内

• 自定义颜色作为画板背景颜色

  
  
  

  颜色背景.png

• 用图片作为画板背景 （不惜祭出本人照片...别影响简友看文的心情就好）

图片背景.png

• 保存后查看图片

  
  
  

  查看合成图片.png

主要的实现思路

• 1.创建一个保存所有路径的数组

/** 所有的路径 */
@property (nonatomic, strong) NSMutableArray * paths;

• 2.自定义一个保存每个路径、颜色、宽度的类PathAttribute

@interface PathAttribute : NSObject

/** 画笔颜色 */
@property (nonatomic, strong) UIColor * pathColor;
/** 画笔宽度 */
@property (nonatomic, assign) CGFloat pathWidth;
/** 路径 */
@property (nonatomic, strong) NSMutableArray * path;

@end

• 3.重写touchesBegan:touches withEvent:方法开启路径并保存到路径数组内

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //创建一个路径对象，放到paths里面
    PathAttribute *pathAttribute = [[PathAttribute alloc]init];
    
    pathAttribute.pathColor = self.pathColor;
    pathAttribute.pathWidth = self.pathWidth;
    pathAttribute.path = [NSMutableArray array];
    
    [self.paths addObject:pathAttribute];
}

• 4.重写touchesMoved:touches withEvent:收集手指移动经过的所有点

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    //获取当前路径
    PathAttribute *pathAttribute = [self.paths lastObject];
    //获取移动到的点
    CGPoint movePoint = [[touches anyObject]locationInView:self];
    //收集路径上所有的点
    [pathAttribute.path addObject:[NSValue valueWithCGPoint:movePoint]];
    
    //苹果要求我们调用UIView类中的setNeedsDisplay方法，则程序会自动调用drawRect方法进行重绘
    [self setNeedsDisplay];
}

• 5.最重要的一步，重写drawRect:绘制出所有的内容

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];    
    //获取上下文
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    //创建路径
    for (int i = 0; i < self.paths.count; i++) {
        
        PathAttribute *pathAttribute = [self.paths objectAtIndex:i];       
        CGMutablePathRef path = CGPathCreateMutable();        
        //绘图
        for (int j = 0; j < pathAttribute.path.count; j++) {            
            CGPoint point = [[pathAttribute.path objectAtIndex:j]CGPointValue] ;            
            if (j == 0) {
                CGPathMoveToPoint(path, &CGAffineTransformIdentity, point.x,point.y);
            }else{
                CGPathAddLineToPoint(path, &CGAffineTransformIdentity, point.x, point.y);
            }
        }
        //设置path样式
        CGContextSetStrokeColorWithColor(currentContext, pathAttribute.pathColor.CGColor);
        CGContextSetLineWidth(currentContext, pathAttribute.pathWidth);
        //路径添加到currentContext
        CGContextAddPath(currentContext, path);
        
        CGContextStrokePath(currentContext);
        
        CGPathRelease(path);
    }
}

以上是主要的实现代码，Demo在这里

使用方法

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    //创建画板
    if (!self.mainView) {
        self.mainView = [[[UINib nibWithNibName:@"MainView" bundle:[NSBundle mainBundle]] instantiateWithOwner:self options:nil] lastObject];
        //设置为全屏
        self.mainView.frame = CGRectMake(0, 0, kWidth, kHeight);
        //代理
        self.mainView.delegate = self;
        //设置画笔最大宽度
        self.mainView.pathMaxWidth = 30;
        
        [self.view addSubview:self.mainView];
    }
}
//实现代理方法
#pragma mark - MainViewDelegate

- (void)openPhotoAlbum
{
    //打开相册
    [self takeFromAlbum];
}

- (void)takeFromAlbum
{
     //详细步骤见Demo...
}

参考：
Core Graphics快速入门——从一行代码说起
Core Graphics框架 : 一个让程序猿成为视觉设计师的框架
iOS绘图—— UIBezierPath 和 Core Graphics

---

IAMCJ