首页 > 移动平台 > 详细

iOS_Quartz2D之涂鸦板

时间:2015-10-05 23:19:15      阅读:328      评论:0      收藏:0      [点我收藏+]

 

原理:利用view的触摸事件,使用UIBezierPath对象进行涂鸦,UIBezierPath可以储存线段上的所有点,当成一条路径使用,并且被渲染到视图上;

响应者对象:继承了UIResponder的对象

触摸事件:一根或多根手指;
开始触摸:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;

移动:每移动一点就会调用一次;

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;

触摸结束:

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;

触摸事件被打断:

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;

远程控制事件:

- (void)remoteControlReceivedWithEvent:(UIEvent *)event NS_AVAILABLE_IOS(4_0);

UIToch对象:

触摸时,会为每个手指创建一个相关联的UITouch对象,保存着跟手指相关的信息,触摸的位置、时间等;

手指移动时,系统会更新同一个UITouch对象,一直保存手指触摸的位置;

手指移开时,销毁UITouch;

获取touch对象:UITouch * touch = [touches anyObject];

触摸点所在的view

touch.view

触摸点所在的window

touch.window

获取当前触摸点的位置,相对于哪个view的位置,填nil为相对于window;

    CGPoint point = [touch locationInView:touch.view];

获取上一个触摸点的位置,可以用于touchesMoved方法中

    CGPoint point2 = [touch previousLocationInView:touch.view];

步骤:

1、自定义一个view作为涂鸦板,view继承自UIResponder,可以接收触摸事件;

技术分享
 1 属性声明;后面都会用到;
 2 @interface tuyaView ()
 3 
 4 @property (nonatomic, strong) NSMutableArray * linePaths;
 5 
 6 @property (nonatomic, strong) NSMutableArray * penValues;
 7 
 8 @property (nonatomic, strong) NSMutableArray * penColors;
 9 
10 @property (nonatomic, strong) manager * m;
11 
12 @property (nonatomic, strong) UIView * touchPointView;
13 
14 @end
15 
16 //这几个数组的懒加载;
17 -(manager *)m
18 {
19     if (!_m)
20     {
21         _m = [manager shared];
22     }
23     return _m;
24 }
25 
26 -(NSMutableArray *)penValues
27 {
28     if (!_penValues)
29     {
30         _penValues = [NSMutableArray array];
31     }
32     return _penValues;
33 }
34 
35 - (NSMutableArray *)linePaths
36 {
37     if (!_linePaths) {
38         _linePaths = [NSMutableArray array];
39     }
40     return _linePaths;
41 }
42 
43 -(NSMutableArray *)penColors
44 {
45     if (!_penColors) {
46         _penColors = [NSMutableArray array];
47     }
48     return _penColors;
49 }
View Code

 

2、声明一个@property (nonatomicstrongNSMutableArray * linePaths;属性,用于存放画的每一条线段;

3、在viewtouchBegin事件中,新建一个UIBezierPath对象,使用它的moveToPoint方法将当前的触摸点设为这条线段的起点,并且将他存放到我们的线段数组中;

 

技术分享
 1 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 2 {
 3     UITouch * touch = [touches anyObject];
 4     CGPoint point = [touch locationInView:touch.view];
 5     //
 6     UIBezierPath * linePath = [UIBezierPath bezierPath];
 7     [linePath moveToPoint:point];
 8     [self.linePaths addObject:linePath];
 9     
10     //保存线条粗细
11     float penValue = self.m.penValue;
12     [self.penValues addObject:[NSNumber numberWithFloat:penValue ]];
13     //保存线条颜色
14     UIColor * penColor = self.m.penColor;
15     [self.penColors addObject:penColor];
16     
17     //创建触控点
18     CGFloat touchRadius = self.m.penValue + 10;
19     self.touchPointView = [[UIView alloc] initWithFrame:CGRectMake(point.x - touchRadius * 0.5, point.y - touchRadius * 0.5, touchRadius, touchRadius)];
20     self.touchPointView.layer.cornerRadius = touchRadius * 0.5;
21     self.touchPointView.clipsToBounds = YES;
22     self.touchPointView.backgroundColor = [UIColor redColor];
23     self.touchPointView.alpha = 0.5;
24     [self addSubview:self.touchPointView];
25 }
View Code

 

4、这样线段的起点有了,接下就是监控手指的移动,将剩余线段点加入到上面创建的UIBezierPath对象中;从数组中取出贝塞尔对象,使用它的addLineToPoint方法,将移动后得到的当前点储存上;并且调用viewsetNeedDisplay方法,重绘view

5、实现view的drawRect方法:此方法用于绘制view,第四部我们设置了每当touchmove时都会调用此方法,于是我们从数组中拿出每一个贝塞尔对象,将它画到view上;这样绘制功能就实现了;

 

 

iOS_Quartz2D之涂鸦板

原文:http://www.cnblogs.com/xiaoqiuge/p/4856473.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!