触控(Touch)

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