iOS开发UI篇—事件处理（完成一个简单的涂鸦板）

浏览数：32 / 时间：2015年06月11日

iOS开发UI篇—事件处理（实现一个简单的涂鸦板）

一、说明

该程序使用事件处理机制和绘图完成了一个简单的涂鸦板应用，使用鼠标在涂鸦板内拖动即可进行涂鸦，点击保存到相册按钮，可以把完成的涂鸦保存到手机的相册中，点击回退按钮可以向后退回一步，点击清空可以让涂鸦板清空。

文件结构和界面搭建：

二、代码示例

YYViewController.m文件

 1 //
 2 //  YYViewController.m
 3 //  02-画板程序
 4 //
 5 //  Created by apple on 14-6-12.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "YYView.h"
11 #import "UIImage+YYcaptureView.h"
12 #import "MBProgressHUD+NJ.h"
13 
14 @interface YYViewController ()
15 - (IBAction)clearOnClick:(UIButton *)sender;
16 @property (weak, nonatomic) IBOutlet YYView *customView;
17 - (IBAction)backOnClick:(UIButton *)sender;
18 - (IBAction)saveBtnOnClick:(UIButton *)sender;
19 
20 
21 @end
22 
23 @implementation YYViewController
24 
25 - (void)viewDidLoad
26 {
27     [super viewDidLoad];
28 }
29 
30 
31 - (IBAction)clearOnClick:(UIButton *)sender {
32     //调用清理方法
33     [self.customView clearView];
34 }
35 
36 - (IBAction)backOnClick:(UIButton *)sender {
37     //调用回退方法
38     [self.customView backView];
39 }
40 
41 - (IBAction)saveBtnOnClick:(UIButton *)sender {
42     //调用分类中的方法，获取图片
43     UIImage *newImage =    [UIImage YYcaptureImageWithView:self.customView];
44     //将图片保存到手机的相册中去
45     UIImageWriteToSavedPhotosAlbum(newImage, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
46 }
47 
48 //处理图片的保存事件
49  - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
50 {
51     //使用第三方框架，提供消息提示
52     if (error) {
53         [MBProgressHUD showError:@"涂鸦保存失败，请检查权限"];
54     }else
55     {
56         [MBProgressHUD showSuccess:@"保存成功！"];
57     }
58     
59 }
60 @end

YYView.h文件

 1 //
 2 //  YYView.h
 3 //  02-画板程序
 4 //
 5 //  Created by apple on 14-6-12.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 
11 @interface YYView : UIView
12 
13 -(void)clearView;
14 -(void)backView;
15 @end

YYView.m文件

  1 //
  2 //  YYView.m
  3 //  02-画板程序
  4 //
  5 //  Created by apple on 14-6-12.
  6 //  Copyright (c) 2014年 itcase. All rights reserved.
  7 //
  8 
  9 #import "YYView.h"
 10 
 11 //私有扩展
 12 @interface YYView ()
 13 /**
 14  *  用来存储所有的路径信息
 15  */
 16 @property(nonatomic,strong)NSMutableArray *paths;
 17 @end
 18 @implementation YYView
 19 
 20 #pragma mark-懒加载
 21 -(NSMutableArray *)paths
 22 {
 23     if (_paths==nil) {
 24         _paths=[NSMutableArray array];
 25     }
 26     return _paths;
 27 }
 28 
 29 //开始手指触摸事件
 30 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 31 {
 32     //1.获取手指对应的UItoch对象
 33         UITouch  *touch=[touches anyObject];
 34     
 35     //2.通过UIToch对象获取手指触摸的位置
 36     CGPoint starPoint=[touch locationInView:touch.view];
 37     
 38     //3.当用户手指按下的时候创建一条路径
 39     UIBezierPath *path=[UIBezierPath bezierPath];
 40     
 41     //设置路径的相关属性
 42     [path setLineWidth:5];
 43     [path setLineJoinStyle:kCGLineJoinRound];
 44     [path setLineCapStyle:kCGLineCapRound];
 45     
 46     //4.设置当前路径的起点
 47     [path moveToPoint:starPoint];
 48     
 49     //5.将路径添加到数组中去
 50     [self.paths addObject:path];
 51 }
 52 
 53 //手指移动事件
 54 -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
 55 {
 56     //1.获取手指对应的UIToch对象
 57     UITouch *touch=[touches anyObject];
 58     //2.通过UIToch对象获取手指触摸的位置
 59     CGPoint movePoint=[touch locationInView:touch.view];
 60     //3.取出当前的path
 61     UIBezierPath *currentPath=[self.paths lastObject];
 62     //4.设置当前路径的终点
 63     [currentPath addLineToPoint:movePoint];
 64     
 65     //5.调用drawRect方法重绘视图
 66     [self setNeedsDisplay];
 67 }
 68 
 69 ////抬起手指
 70 //-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
 71 //{
 72 //    [self touchesMoved:touches withEvent:event];
 73 //}
 74 
 75 //画线
 76 - (void)drawRect:(CGRect)rect
 77 {
 78     //根据路径绘制所有的线段
 79     for (UIBezierPath *path in self.paths) {
 80         [path stroke];
 81     }
 82 }
 83 
 84 /**
 85  *  清空面板
 86  */
 87 -(void)clearView
 88 {
 89     //清空所有的路径
 90     [self.paths removeAllObjects];
 91     //调用方法重新绘图
 92     [self setNeedsDisplay];
 93 }
 94 
 95 /**
 96  *  回退操作
 97  */
 98 -(void)backView
 99 {
100     //移除路径数组中的最后一个元素（最后一条路径）
101     [self.paths removeLastObject];
102     //重新绘图
103      [self setNeedsDisplay];
104 }
105 @end

提供一个对功能进行封装的分类。

UIImage+YYcaptureView.h文件

 1 //
 2 //  UIImage+YYcaptureView.h
 3 //  02-画板程序
 4 //
 5 //  Created by apple on 14-6-12.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 
11 @interface UIImage (YYcaptureView)
12 
13 /**
14  *  该分类提供一个方法，接收一个view的参数，返回一个view的视图
15  */
16 +(UIImage *)YYcaptureImageWithView:(UIView *)view;
17 @end

UIImage+YYcaptureView.m文件

 1 //
 2 //  UIImage+YYcaptureView.m
 3 //  02-画板程序
 4 //
 5 //  Created by apple on 14-6-12.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "UIImage+YYcaptureView.h"
10 
11 @implementation UIImage (YYcaptureView)
12 
13 +(UIImage *)YYcaptureImageWithView:(UIView *)view
14 {
15     //1.创建bitmap图形上下文
16     UIGraphicsBeginImageContext(view.frame.size);
17     //2.将要保存的view的layer绘制到bitmap图形上下文中
18     [view.layer renderInContext:UIGraphicsGetCurrentContext()];
19     //3.取出绘制好的图片
20     UIImage *newImage=UIGraphicsGetImageFromCurrentImageContext();
21     //4.返回获取的图片
22     return newImage;
23 }
24 @end