1 使用触控实现一个简易的画板
1.1 问题
触控（Touch）是一个UITouch类型的对象，当用户触摸了屏幕上的视图时自动被创建，通常使用触控实现绘图、涂鸦、手写等功能。本案例使用触控实现一个简易的画板，可以在画板上勾画出一条线，如图-1所示：
1.2 方案
首先在创建好的SingleViewApplication项目中创建一个画板类TRDrawView，继承至UIView，该类有一个NSMutableArray类型的属性points，用于存储手指触摸的轨迹也就是点。
其次在Stroyboard的场景中拖放一个View控件，和屏幕一样大小，然后将View的类型修改为TRDrawView。
然后在TRDrawView类中通过touchesBegan:、touchesMoved:方法获取到手指的触摸点，将点存储到points数组中。
最后在TRDrawView类中重写drawRect方法，该方法中根据手指的触摸轨迹points进行屏幕绘制。切记要在touchesMoved方法中调用setNeedDisplay刷新界面。
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建项目和画板类
首先在创建好的SingleViewApplication项目中创建一个画板类TRDrawView，继承至UIView，该类有一个NSMutableArray类型的属性points，用于存储手指触摸的轨迹也就是点，代码如下所示：
@interface TRDrawView ()
@property (strong, nonatomic) NSMutableArray *points;
@end
然后从对象库中拖放一个View控件到Storyboard场景中，View控件的大小和屏幕一样。在右边栏的检查器三将View的类型设置为TRDrawView，如图-2所示：
步骤二：在TRDawView中获取手指触摸轨迹
在TRDrawView类中首先重写touchesBegan:，在该方法将points属性进行初始化，并获取当前手指的触摸点，存储到points数组中，代码如下所示：
– (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//初始化数组
self.points = [@[] mutableCopy];
//获取当前触摸点
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
//将点放进数组中
NSValue *value = [NSValue valueWithCGPoint:point];
[self.points addObject:value];
}
然后再重写touchesMove:方法，在该方法中继续获取手指的当前触摸点，并将触摸点存储到points数组中，代码如下所示：
– (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
//获取当前触摸点
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
//将点放进数组中
NSValue *value = [NSValue valueWithCGPoint:point];
[self.points addObject:value];
}
步骤三：重写drawRect方法，进行屏幕绘制
在TRDrawView类中重写drawRect方法，该方法中根据手指的触摸轨迹points进行屏幕绘制，代码如下所示：
– (void)drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPath];
NSValue *value = [self.points firstObject];
[path moveToPoint:[value CGPointValue]];
for(NSValue *valu in self.points) {
[path addLineToPoint:[valu CGPointValue]];
}
path.lineWidth = 2;
[[UIColor purpleColor]setStroke];
[path stroke];
}
最后要在touchesMoved:和touchesEnded:方法中调用setNeedDisplay刷新界面，代码如下所示：
– (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
//获取当前触摸点
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
//将点放进数组中
NSValue *value = [NSValue valueWithCGPoint:point];
[self.points addObject:value];
//刷新界面
[self setNeedsDisplay];
}
– (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[self setNeedsDisplay];
}
1.4 完整代码
本案例中，TRDrawView.m文件中的完整代码如下所示：
#import “TRDrawView.h”
@interface TRDrawView ()
@property (strong, nonatomic) NSMutableArray *points;
@end
@implementation TRDrawView
– (void)drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPath];
NSValue *value = [self.points firstObject];
[path moveToPoint:[value CGPointValue]];
for(NSValue *valu in self.points) {
[path addLineToPoint:[valu CGPointValue]];
}
path.lineWidth = 2;
[[UIColor purpleColor]setStroke];
[path stroke];
}
– (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//初始化数组
self.points = [@[]mutableCopy];
//获取当前触摸点
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
//将点放进数组中
NSValue *value = [NSValue valueWithCGPoint:point];
[self.points addObject:value];
}
– (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
//获取当前触摸点
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
//将点放进数组中
NSValue *value = [NSValue valueWithCGPoint:point];
[self.points addObject:value];
//刷新界面
[self setNeedsDisplay];
}
– (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[self setNeedsDisplay];
}
@end
