需求：實現一個簡易的涂鴉板應用，使用鼠標在涂鴉板內拖動即可進行涂鴉，點擊保存按鈕，可以把完成的涂鴉保存，點擊回退按鈕可以向后退回一步，點擊清空可以讓涂鴉板清空。

實現步驟：

1、布局storyboard，連線各按鈕以及涂鴉板；

2、監聽觸摸事件，主要為touchesBegan:和touchesMoved:;

3、獲取移動的路徑并添加到 UIBezierPath 對象；

4、渲染；

示例文件結構：

?

具體實現代碼：

1 // 2 // Scrawl.h 3 // 1-04-Scrawl 4 // 5 // Created by xiaomoge on 15/1/4. 6 // Copyright (c) 2015年 xiaomoge. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h> 10 11 @interface Scrawl : UIView 12 /* 13 涂鴉線條的寬度 14 */ 15 @property (nonatomic,assign) CGFloat linsWidth; 16 /* 17 回退 18 */ 19 - (void)back; 20 /* 21 清屏 22 */ 23 - (void)clear; 24 @end

?

1 // 2 // Scrawl.m 3 // 1-04-Scrawl 4 // 5 // Created by xiaomoge on 15/1/4. 6 // Copyright (c) 2015年 xiaomoge. All rights reserved. 7 // 8 9 #import "Scrawl.h" 10 @interface Scrawl () 11 /* 12 存儲所有線的路徑的數組 13 */ 14 @property (nonatomic,strong) NSMutableArray *linsPath; 15 @end 16 @implementation Scrawl 17 #pragma mark - 懶加載 18 - (NSMutableArray *)linsPath { 19 if (!_linsPath) { 20 _linsPath = [NSMutableArray array]; 21 } 22 return _linsPath; 23 } 24 - (void)drawRect:(CGRect)rect { 25 //獲得當前數組中的總數 26 NSInteger count = self.linsPath.count; 27 for (NSInteger i = 0; i < count; i ++) { 28 //取得一個path對象 29 UIBezierPath *path = self.linsPath[i]; 30 //設置線寬 31 path.lineWidth = self.linsWidth; 32 //設置線的首尾樣式 33 path.lineCapStyle = kCGLineCapRound; 34 //設置線的連接樣式 35 path.lineJoinStyle = kCGLineJoinRound; 36 //渲染 37 [path stroke]; 38 } 39 } 40 //開始觸摸事件 41 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { 42 //取得當前觸摸點的位置 43 UITouch *touch = [touches anyObject]; 44 CGPoint point = [touch locationInView:touch.view]; 45 //創建一個path對象，注意這里是[UIBezierPath bezierPath] 46 UIBezierPath *path = [UIBezierPath bezierPath]; 47 //創建path對象的起點位置 48 [path moveToPoint:point]; 49 //添加到線的路徑數組中 50 [self.linsPath addObject:path]; 51 } 52 //移動觸摸事件 53 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { 54 //取得當前觸摸點的位置 55 UITouch *touch = [touches anyObject]; 56 CGPoint point = [touch locationInView:touch.view]; 57 //創建一個path對象，為線的路徑當前的點 58 UIBezierPath *path = [self.linsPath lastObject]; 59 //設置path對象的結束點 60 [path addLineToPoint:point]; 61 //重繪 62 [self setNeedsDisplay]; 63 } 64 //回退事件 65 - (void)back { 66 //回退其實就是把最后的一條線給清除 67 [self.linsPath removeLastObject]; 68 //然后重繪 69 [self setNeedsDisplay]; 70 } 71 - (void)clear { 72 //回退其實就是把所有的線給清除掉 73 [self.linsPath removeAllObjects]; 74 //然后重繪 75 [self setNeedsDisplay]; 76 } 77 @end

?

1 // 2 // ViewController.m 3 // 1-04-Scrawl 4 // 5 // Created by xiaomoge on 15/1/4. 6 // Copyright (c) 2015年 xiaomoge. All rights reserved. 7 // 8 9 #import "ViewController.h" 10 #import "Scrawl.h" 11 @interface ViewController () 12 @property (weak, nonatomic) IBOutlet Scrawl *scrawlView; 13 14 @end 15 16 @implementation ViewController 17 18 - (void)viewDidLoad { 19 [super viewDidLoad]; 20 self.scrawlView.linsWidth = 3; 21 } 22 - (IBAction)backClick { 23 [self.scrawlView back]; 24 } 25 - (IBAction)clearClick { 26 [self.scrawlView clear]; 27 } 28 - (IBAction)saveClick { 29 //開啟位圖上下文 30 UIGraphicsBeginImageContext(self.scrawlView.frame.size); 31 //渲染 32 [self.scrawlView.layer renderInContext:UIGraphicsGetCurrentContext()]; 33 //獲取當前位圖上下文里的圖片 34 UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); 35 //結束位圖上下文的編輯 36 UIGraphicsEndImageContext(); 37 //把圖片轉為NSData 38 NSData *data = UIImagePNGRepresentation(img); 39 //保存 40 [data writeToFile:@"/Users/xiaobao/Desktop/scrawl.png" atomically:YES]; 41 //注意，這里其實也可以把這個保存圖片抽取成一個方法，然后調用即可。 42 } 43 @end

?

最后的效果(點擊保存按鈕保存下來的整個涂鴉板)：

轉載于:https://www.cnblogs.com/xiaomoge/p/4202043.html

總結

以上是生活随笔為你收集整理的UI进阶--Quartz2D和触摸事件的简单使用：简易涂鸦板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。