标签:
触控(Touch)是一个UITouch类型的对象,当用户触摸了屏幕上的视图时自动被创建,通常使用触控实现绘图、涂鸦、手写等功能。本案例使用触控实现一个简易的画板,可以在画板上勾画出一条线,如图-1所示:
首先在创建好的SingleViewApplication项目中创建一个画板类TRDrawView,继承至UIView,该类有一个NSMutableArray类型的属性points,用于存储手指触摸的轨迹也就是点。
其次在Stroyboard的场景中拖放一个View控件,和屏幕一样大小,然后将View的类型修改为TRDrawView。
然后在TRDrawView类中通过touchesBegan:、touchesMoved:方法获取到手指的触摸点,将点存储到points数组中。
最后在TRDrawView类中重写drawRect方法,该方法中根据手指的触摸轨迹points进行屏幕绘制。切记要在touchesMoved方法中调用setNeedDisplay刷新界面。
实现此案例需要按照如下步骤进行。
步骤一:创建项目和画板类
首先在创建好的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];
}
本案例中,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
标签:
原文地址:http://www.cnblogs.com/yhj1787354782/p/5053151.html