iOS使用贝塞尔曲线创建简易画板

先看一下具体效果：

画板.gif

话不多说，直接上代码：

首先我们需要设定线条颜色、宽度以及贝塞尔曲线对象：

@property (nonatomic, assign) CGFloat lineWidth;//曲线宽度
@property (nonatomic, strong) UIColor *lineColor;//曲线颜色
 UIBezierPath *bezierPath;

另外我们要创建一个数组，用来存储曲线路径

@property (nonatomic, strong) NSMutableArray * pathArray; 

接下来我们就可以开始实现绘制的代码。
在- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent*)event方法当中：

    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self];
    bezierPath = [[UIBezierPath alloc] init];
    [bezierPath moveToPoint:currentPoint];
    [_pathArray addObject:bezierPath];

因为是绘制，所以会调用- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event记录路径
在这个方法当中：

    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self];
    CGPoint previousPoint = [touch previousLocationInView:self];
    
    CGPoint midPoint = CGPointMake((currentPoint.x + previousPoint.x) * 0.5, (currentPoint.y + previousPoint.y) * 0.5);//得到锚点，中心点

    // touchesMoved方法中添加每一个点到bezierPath中
    [bezierPath addQuadCurveToPoint:currentPoint controlPoint:midPoint];

    [self setNeedsDisplay];

此处调用了setNeedsDisplay方法，每当调用setNeedsDisplay，就会自动调用drawRect方法，进行绘制。

过程中每次touch结束就调用- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event,在该方法当中：

    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self];
    CGPoint previousPoint = [touch previousLocationInView:self];
    CGPoint midPoint = CGPointMake((currentPoint.x + previousPoint.x) * 0.5, (currentPoint.y + previousPoint.y) * 0.5);
    [bezierPath addQuadCurveToPoint:currentPoint controlPoint:midPoint];
    [self setNeedsDisplay];

接下来就到了真正的显示路径的过程，调用- (void)drawRect:(CGRect)rect
该方法当中：

    [_lineColor setStroke];//设置路径描边颜色
    
    if(self.pathArray.count){
        for (UIBezierPath *path in self.pathArray) {
            path.lineJoinStyle = kCGLineJoinRound;
            path.lineCapStyle = kCGLineCapRound;
            path.lineWidth = _lineWidth;
                // 设置正常画线的画线模式
            [path strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];
            [path stroke];//描边路径
        }
    }

到此，我们就可以实现绘制。
我们还可以撤销/清除以及存储路径，我们在撤销的方法当中使用如下代码：

    [self.pathArray removeObject:self.pathArray.lastObject];//移除数组中最后添加的path
    [self setNeedsDisplay];//重新绘制

清除的方法体当中直接移除全部路径，重新绘制就可以了

    [self.pathArray removeAllObjects];
    [self setNeedsDisplay];

至于存储，我们是将所绘路径保存为图片存储至相册（当然也可以存到沙盒当中，使用的时候再取出来）

- (void)save {

    UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0);
    
    // 获取当前上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 渲染图层到上下文
    [self.layer renderInContext:context];
    
    // 从上下文中获取图片

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
//结束上下文
    UIGraphicsEndImageContext();
//存储
    UIImageWriteToSavedPhotosAlbum(newImage, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
}


- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {
    
    UIAlertView * alert = [[UIAlertView alloc] init];
    [alert addButtonWithTitle:@"OK"];
    if (error) {
        alert.title = @"保存失败";
    } else {
        alert.title = @"保存成功";
    }
    [alert show];
}

到这里就基本实现了一个简易小画板，当然我们还可以添加更多的功能，比如更改描边颜色。
此处放上一个小demo。