iOS開發UI篇―事件處理（實現一個簡單的塗鴉板）
編輯：關於IOS
一、說明
該程序使用事件處理機制和繪圖完成了一個簡單的塗鴉板應用，使用鼠標在塗鴉板內拖動即可進行塗鴉，點擊保存到相冊按鈕，可以把完成的塗鴉保存到手機的相冊中，點擊回退按鈕可以向後退回一步，點擊清空可以讓塗鴉板清空。
文件結構和界面搭建：
二、代碼示例
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
相關文章
+