iOS開發UI篇—事件處理(實現一個簡單的塗鴉板) – iPhone手機開發技術文章 iPhone軟體開發教學課程

 

 

一、說明

 

該程序使用事件處理機制和繪圖完成瞭一個簡單的塗鴉板應用,使用鼠標在塗鴉板內拖動即可進行塗鴉,點擊保存到相冊按鈕,可以把完成的塗鴉保存到手機的相冊中,點擊回退按鈕可以向後退回一步,點擊清空可以讓塗鴉板清空。

 

文件結構和界面搭建:

 

 

 

 

 

二、代碼示例

 

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

You May Also Like