本文主要介绍一下用OC进行手涂鸦板的简易开发。涂鸦画板虽然在实际应用中的作用不大，但对于在某些社交App中却可以起到增强用户体验的效果，尤其是自iOS10之后，iMessage增加的涂鸦功能，在某种意义上改变了用户的社交方式。
本篇所讲的案例，主要运用到UIBezierPath(贝塞尔曲线)、UITouch的触摸事件。
先放上效果图：
1、界面布局
为了方便，笔者直接使用StoryBoard搭建界面。
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];
}
但是，此时运行程序，你会发现什么效果也没有。
接下就要执行最重要的一步。
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简易涂鸦画板实例的大致思路，若有疑问，欢迎与笔者讨论。
