码迷,mamicode.com
首页 > 其他好文 > 详细

触控(Touch)

时间:2015-12-17 10:52:19      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:

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

 

 

触控(Touch)

标签:

原文地址:http://www.cnblogs.com/yhj1787354782/p/5053151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!