iOS简易涂鸦画板实例

本文主要介绍一下用OC进行手涂鸦板的简易开发。涂鸦画板虽然在实际应用中的作用不大，但对于在某些社交App中却可以起到增强用户体验的效果，尤其是自iOS10之后，iMessage增加的涂鸦功能，在某种意义上改变了用户的社交方式。

本篇所讲的案例，主要运用到UIBezierPath(贝塞尔曲线)、UITouch的触摸事件。
先放上效果图：

涂鸦.gif

1、界面布局
为了方便，笔者直接使用StoryBoard搭建界面。

界面布局.jpg

2、重写UITouch的触摸事件
1）、当手指接触屏幕时，就会调用touchesBegan:withEvent方法。实现涂鸦的功能。大致思路就是，通过" UITouch *touch = [touches anyObject]"方法获得当前手指的位置，以该位置绘制贝塞尔曲线的起点，并将所画的线用数组保存。

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //1、每次触摸的时候都应该去创建一条贝塞尔曲线
    CustomerBezierPath *path = [CustomerBezierPath new];
    //2、移动画笔
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    [path moveToPoint:point];
    //设置线宽
    path.lineWidth = self.lineWidth;
    //狮子颜色
    path.color = self.lineColor;//保存线条当前颜色
    if (!self.lineArray) {
        self.lineArray = [NSMutableArray new];
    }
    [self.lineArray addObject:path];
    
}

笔者这里自定义了一个CustomerBezierPath类，继承于UIBezierPath类，主要为了能够保存当前线条的颜色。

#import <UIKit/UIKit.h>

@interface CustomerBezierPath : UIBezierPath

@property (nonatomic, strong) UIColor *color; //保存当前线条的颜色

@end

2）、当手指在屏幕上移时，动就会调用touchesMoved:withEvent方法。实现画线。将保存在线条数组中的CustomerBezierPath对象取出，由于每次新画的线都是数组的最后一个元素，因此直接取lastObject。然后连接终点，重新绘制。

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    CustomerBezierPath *path = self.lineArray.lastObject;
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    [path addLineToPoint:point];
    //重新绘制
    [self setNeedsDisplay];
}

但是，此时运行程序，你会发现什么效果也没有。

涂鸦2.gif

接下就要执行最重要的一步。

3、重写drawRect方法
因为绘图操作是在UIView类的drawRect方法中完成的，所以如果我们要想在一个UIView中绘图，需要写一个扩展UIView 的类，并重写drawRect方法，在这里进行绘图操作，程序会自动调用此方法进行绘图。

- (void)drawRect:(CGRect)rect{
    //遍历数组，绘制曲线
    if(self.lineArray.count > 0){
        for (CustomerBezierPath *path in self.lineArray) {
            [path.color setStroke];
            [path setLineCapStyle:kCGLineCapRound];
            [path stroke];
        }
    }
}

4、设置Slider，控制线条粗细。

    //设置线宽的最大值和最小值
    self.slider.value = 1;
    self.slider.minimumValue = 1;
    self.slider.maximumValue = 10;
    [self.slider addTarget:self action:@selector(changeLineWidth) forControlEvents:UIControlEventValueChanged];

//修改线宽
- (void)changeLineWidth{
    self.boardView.lineWidth = self.slider.value;
}

5、设置Button
这里说一下橡皮擦的思路，其实就是将线条颜色变为白色，再次画线。
而撤销，就是将存放线条的数组的最后一个元素，也就是最新的线条删去。

//撤销
- (IBAction)undo:(id)sender {
    [self.boardView.lineArray removeLastObject];
    [self.boardView setNeedsDisplay];
}

//清屏
- (IBAction)cleanScreen:(id)sender {
//    NSLog(@"%ld",self.boardView.lineArray.count);
    [self.boardView.lineArray removeAllObjects];
    [self.boardView setNeedsDisplay];
}

//橡皮擦
- (IBAction)eraser:(id)sender {
    //修改画板线条颜色
    self.boardView.lineColor = self.boardView.backgroundColor;
}

以上就是iOS简易涂鸦画板实例的大致思路，若有疑问，欢迎与笔者讨论。

iOS简易涂鸦画板实例

推荐阅读更多精彩内容