监听屏幕触摸事件实现涂鸦

Sian

一、直接上图



二、设计说明

1、UIView继承自UIResponder，UIResponder能响应所有的事件与用户进行交互，如：触摸事件(单点/多点触控)、加速事件(重力感应)、远程事件(耳机播放/暂停/下一曲)

2、触摸事件主要涉及以下4个方法

// 开始触屏时调用，只调用一次
- (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;

3、结合上述相关方法，使用Quartz2D绘制图形到当前视图

4、将图形保存到本地相册

三、关键代码

1. #import "SAView.h"
3. @implementation SAView
5. #pragma mark - 初始化
6. - (NSMutableArray *)paths
7. {
8.     if (_paths == nil) {
9.         _paths = [NSMutableArray array];
10.     }
11.     return _paths;
12. }
13. // 图层渲染方法，每调用setNeedsDisplay方法都会调用此方法
14. - (void)drawRect:(CGRect)rect
15. {
16.     for (UIBezierPath *path in self.paths) {
17.         [path stroke];
18.     }
19. }
21. #pragma mark - 触摸事件处理
22. // 开始涂鸦（以每一笔为基本单位），接触屏幕时调用一次
23. - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
24. {
25.     NSLog(@"touchesBegan");
26.     // 创建一个贝赛尔曲线对象，设置相关属性（圆角线条、线条粗细）
27.     UIBezierPath *path = [UIBezierPath bezierPath];
28.     path.lineCapStyle = kCGLineCapRound;
29.     path.lineJoinStyle = kCGLineJoinRound;
30.     path.lineWidth = 5;
31.    
32.     // 通过touch事件获取位置变化传入给贝赛尔曲线
33.     CGPoint point = [[touches anyObject] locationInView:self];
34.     [path moveToPoint:point];
35.    
36.     // 将该曲线对象加入到数组
37.     [self.paths addObject:path];
38.    
39.     // 刷新图层
40.     [self setNeedsDisplay];
41. }
43. // 移动手指，手指移动时会反复调用，频率较高
44. - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
45. {
46.     NSLog(@"touchesMoved");
47.     /* 获取当前画笔跟随触摸移动继续绘制
48.      * 该方法调用频率非常高，一点点移动都会调用多次
49.      * 所以画出的多条折线视觉上是连续的
50.      */
51.     UIBezierPath *path = [self.paths lastObject];
52.     CGPoint point = [[touches anyObject] locationInView:self];
53.     [path addLineToPoint:point];
54.    
55.     // 刷新图层
56.     [self setNeedsDisplay];
57.    
58. }
60. // 结束触摸，即手指离开时调用一次
61. - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
62. {
63.     NSLog(@"touchesEnded");
64.     [self touchesMoved:touches withEvent:event];
65. }
67. #pragma mark - 按钮事件处理
68. // 回退，即移除上一个画笔对象
69. - (IBAction)back:(id)sender
70. {
71.     [self.paths removeLastObject];
72.     [self setNeedsDisplay];
73. }
74. // 清除，移除所有画笔对象
75. - (IBAction)clean:(id)sender
76. {
77.     [self.paths removeAllObjects];
78.     [self setNeedsDisplay];
79. }
80. // 保存图片到本地相册
81. - (IBAction)save:(id)sender
82. {
83.     // 开启图片上下文
84.     UIGraphicsBeginImageContext(self.frame.size);
85.    
86.     // 将当前view上内存渲染到当前上下文
87.     [self.layer renderInContext:UIGraphicsGetCurrentContext()];
88.    
89.     // 将当前上下文内容转换为图片对象
90.     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
91.    
92.     // 关闭图片上下文
93.     UIGraphicsEndImageContext();
94.    
95.     // 将图片保存到本地相册
96.     UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);
97. }
98. @end

复制代码

四、Demo下载：

游客，如果您要查看本帖隐藏内容请回复

活在梦里丶

感谢楼主的分享

喵了个咪

很不错 , 学习学习 !

luojiongyan

很好很强大