（五十四）涂鸦的实现和截图的保存

利用touchesMoved来获取各个触摸点，并存入一个数组。

在drawRect方法内，循环生成这些点，当i＝0时，使用CGContextMoveToPoint方法移动到起点，其余点都通过CGContextAddLineToPoint方法连线。

这样的问题是起点只有一个，画完一条线如果再开始画，会把上次的终点连接到这次的起点；另一个问题是无法回退到上一笔，因为没有记录每次的起点，只是记录了每一个移动微元。

因此应该使用数组存储一条线（从开始触摸到停止触摸），用一个大数组存储这些小数组，为了方便描述，设大数组为S，小数组为C。

在touchesBegan方法中，新建一个小数组C1，将起点装入C1，并将C1装入S，最后还要调用setNeedsDisplay来更新屏幕上的点。

在touchesMoved方法中，使用S的lastObject方法取出现在所在的C，这时取出的为C1，将新点加入C1，注意因为都是指针指向数组，只要改了C1，就改了C中的C1。不要忘记最后调用setNeedsDisplay来更新屏幕上的点。

在touchesEnded方法中，可以发现和touchesMoved方法过程一致，因此只要调用一次touchesMoved即可，传入自己的参数。

这样不仅记录了所有的点，还记录了每一次开始到终止的位置。

最初我的一个思路是每次drawRect中只重新画最后一个数组，但是发现这样以前的线会消失，经过思考发现是drawRect每次调用前会自动清屏，后来想想这是非常科学的，想想以前用单片机做UI还得手动清屏，这个的确方便。

这样的话，清屏只需要调用S数组的removeAllObjects方法，而回退只需要调用S数组的removeLastObject方法。

具体过程为：

首先新建S数组，并且重写get方法初始化：

@property (nonatomic, strong) NSMutableArray *totalPathPoints;

- (NSMutableArray *)totalPathPoints
{
    if (_totalPathPoints == nil) {
        _totalPathPoints = [NSMutableArray array];
    }
    return _totalPathPoints;
}

起点的操作为新建字数组C，将当前点加入，最后装入S：不要忘记更新屏幕！

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint startPos = [touch locationInView:touch.view];
    
    // 每一次开始触摸, 就新建一个数组来存放这次触摸过程的所有点(这次触摸过程的路径)
    NSMutableArray *pathPoints = [NSMutableArray array];
    [pathPoints addObject:[NSValue valueWithCGPoint:startPos]];
    
    // 添加这次路径的所有点到大数组中
    [self.totalPathPoints addObject:pathPoints];
    
    [self setNeedsDisplay];
}

移动操作为将当前点加入S数组的最后一个元素：由于是使用指针，因此改变后不必赋值回去。

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint pos = [touch locationInView:touch.view];
    
    // 取出这次路径对应的数组
    NSMutableArray *pathPoints = [self.totalPathPoints lastObject];
    [pathPoints addObject:[NSValue valueWithCGPoint:pos]];
    
    [self setNeedsDisplay];
}

终点的操作与移动操作完全一致，因此调用一次移动操作：

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self touchesMoved:touches withEvent:event];
}

最后是drawRect方法，因为每次调用drawRect方法都会清屏，因此要重绘所有的点和线。

使用双层循环，外层从S中取得C，内层遍历C中的点，同样地，将第一个点作为起点（MoveToPoint），后面通过连线到达（AddLineToPoint）。

这里顺带复习了使用Quartz2D绘图的方法，先获取上下文，然后调用绘图函数、设置状态等，最后通过Stroke或者Fill方法将上下文中的图像呈现在View上。

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 注意每次drawRect都会清屏，因此需要重绘所有的线。
    for (NSMutableArray *pathPoints in self.totalPathPoints) {
        for (int i = 0; i<pathPoints.count; i++) { // 一条路径
            CGPoint pos = [pathPoints[i] CGPointValue];
            if (i == 0) {
                CGContextMoveToPoint(ctx, pos.x, pos.y);
            } else {
                CGContextAddLineToPoint(ctx, pos.x, pos.y);
            }
        }
    }
    
    CGContextSetLineCap(ctx, kCGLineCapRound);
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    CGContextSetLineWidth(ctx, 5);
    CGContextStrokePath(ctx);
}

回退和清屏非常简单，只需要移除S中的最后一个或者全部元素即可：

- (void)clear
{
    [self.totalPathPoints removeAllObjects];
    [self setNeedsDisplay];
}

- (void)back
{
    [self.totalPathPoints removeLastObject];
    [self setNeedsDisplay];
}

要实现截图，首先要获取绘图板View的内容，可以通过给UIImage增加分类来实现捕捉视图：注意上下文有开启就应当有结束。

+ (instancetype)captureWithView:(UIView *)view
{
    // 1.开启上下文，第二个参数是是否不透明（opaque）NO为透明，这样可以防止占据额外空间（例如圆形图会出现方框），第三个为伸缩比例，0.0为不伸缩。
    UIGraphicsBeginImageContextWithOptions(view.frame.size, NO, 0.0);
    
    // 2.将控制器view的layer渲染到上下文
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    
    // 3.取出图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    // 4.结束上下文
    UIGraphicsEndImageContext();
    
    return newImage;
}

这样就可以得到View上的视图。

要保存图片，使用UIImageWriteToSavedPhotosAlbum函数，注意这是一个C语言函数：

    /**
     *  保存图片到用户相册
     *
     *  @param image              要保存的图片
     *  @param completionTarget   完成后调用的方法所在的对象
     *  @param completionSelector 完成后调用的方法
     *  @param contextInfo        额外上下文消息，一般为空
     */
    void UIImageWriteToSavedPhotosAlbum(UIImage *image, id completionTarget, SEL completionSelector, void *contextInfo);

需要注意的是，完成后调用的函数是需要传入参数的，官方在上面的函数上给出了建议：

// Adds a photo to the saved photos album.  The optional completionSelector should have the form:
//  - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo;

因此应当严格按照这个要求写完成后的回调函数，但是注意的是方法名是image:didFinishSavingWithError:contextInfo:，换句话说就是方法名只包括描述部分和冒号，不包括参数类型和参数名。

应该这样调用：

UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);

并且实现这个方法：注意这里用到一个技巧，如果成功error会是nil，这样就会进入else，否则会进入error的条件分支。

这里使用了一个第三方类库MBProgressHUD来作为指示器，并且使用了李明杰老师进一步封装的版本，在这里感谢李明杰老师。

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
    if (error) { // 保存失败
        [MBProgressHUD showError:@"保存失败"];
    } else { // 保存成功
        [MBProgressHUD showSuccess:@"保存成功"];
    }
}

需要注意的是第一次保存时系统会询问用户是否允许App访问相册，如果不允许则以后不再弹框，要通过修改设置中的隐私->相册中主动开启，如果保存失败，可以通过截图引导用户来操作。

要保存多个路径，还可以使用CGMultablePathRef来创建路径，然后分别加入上下文绘制，需要注意的是它不是OC对象，因此不能直接放入数组，所以这个方法比较麻烦。

还可以使用UIBezierPath对象来实现这个方法，称为贝塞尔曲线对象，每一个UIBezierPath对应一条完整的曲线。可以简单的理解C语言中的CGMutablePathRef对应OC中的UIBezierPath。使用它的好处是全是OC的调用，比较亲切和简洁。

使用UIBezierPath绘图非常简洁，例如绘制一条(0,0)到(100,100)的直线：与之前过程基本一致，好处是面向对象。

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointZero];
[path addLineToPoint:CGPointMake(100,100)];
[path stroke];

这样实现起来就很简单了，创建UIBezierPath对象的数组即可，每一次完整的触摸过程都对应一个UIBezierPath。

起点时创建一个新的UIBezierPath，并且使用moveToPoint记录起点，最后将UIBezierPath加入对象数组，并更新屏幕。

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 1.获得当前的触摸点
    UITouch *touch = [touches anyObject];
    CGPoint startPos = [touch locationInView:touch.view];
    
    // 2.创建一个新的路径
    UIBezierPath *currenPath = [UIBezierPath bezierPath];
    currenPath.lineCapStyle = kCGLineCapRound;
    currenPath.lineJoinStyle = kCGLineJoinRound;
    
    // 设置起点
    [currenPath moveToPoint:startPos];
    
    // 3.添加路径到数组中
    [self.paths addObject:currenPath];
    
    [self setNeedsDisplay];
}

移动和结束时都是获取当前点，取出最后一个UIBezierPath对象并且使用addLineToPoint方法加入这个点：

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint pos = [touch locationInView:touch.view];
    
    UIBezierPath *currentPath = [self.paths lastObject];
    [currentPath addLineToPoint:pos];
    
    [self setNeedsDisplay];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self touchesMoved:touches withEvent:event];
}

在drawRect方法中，取出每个path，调用stroke方法绘制：在这里可以设置全局的状态，例如线宽。

for (UIBezierPath *path in self.paths) {
        path.lineWidth = 10;
        [path stroke];
}