本文主要介紹一下用OC進(jìn)行手涂鴉板的簡易開發(fā)。涂鴉畫板雖然在實(shí)際應(yīng)用中的作用不大萍膛，但對于在某些社交App中卻可以起到增強(qiáng)用戶體驗(yàn)的效果吭服，尤其是自iOS10之后，iMessage增加的涂鴉功能蝗罗，在某種意義上改變了用戶的社交方式艇棕。
本篇所講的案例，主要運(yùn)用到UIBezierPath(貝塞爾曲線)串塑、UITouch的觸摸事件沼琉。
先放上效果圖：
1、界面布局
為了方便桩匪，筆者直接使用StoryBoard搭建界面打瘪。
2、重寫UITouch的觸摸事件
1）傻昙、當(dāng)手指接觸屏幕時(shí)闺骚，就會(huì)調(diào)用touchesBegan:withEvent方法。實(shí)現(xiàn)涂鴉的功能妆档。大致思路就是僻爽，通過" UITouch *touch = [touches anyObject]"方法獲得當(dāng)前手指的位置，以該位置繪制貝塞爾曲線的起點(diǎn)贾惦，并將所畫的線用數(shù)組保存进泼。
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//1、每次觸摸的時(shí)候都應(yīng)該去創(chuàng)建一條貝塞爾曲線
CustomerBezierPath *path = [CustomerBezierPath new];
//2纤虽、移動(dòng)畫筆
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
[path moveToPoint:point];
//設(shè)置線寬
path.lineWidth = self.lineWidth;
//獅子顏色
path.color = self.lineColor;//保存線條當(dāng)前顏色
if (!self.lineArray) {
self.lineArray = [NSMutableArray new];
}
[self.lineArray addObject:path];
}
筆者這里自定義了一個(gè)CustomerBezierPath類，繼承于UIBezierPath類绞惦，主要為了能夠保存當(dāng)前線條的顏色逼纸。
#import <UIKit/UIKit.h>
@interface CustomerBezierPath : UIBezierPath
@property (nonatomic, strong) UIColor *color; //保存當(dāng)前線條的顏色
@end
2）、當(dāng)手指在屏幕上移時(shí)济蝉，動(dòng)就會(huì)調(diào)用touchesMoved:withEvent方法杰刽。實(shí)現(xiàn)畫線。將保存在線條數(shù)組中的CustomerBezierPath對象取出王滤，由于每次新畫的線都是數(shù)組的最后一個(gè)元素贺嫂，因此直接取lastObject。然后連接終點(diǎn)雁乡，重新繪制第喳。
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CustomerBezierPath *path = self.lineArray.lastObject;
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
[path addLineToPoint:point];
//重新繪制
[self setNeedsDisplay];
}
但是，此時(shí)運(yùn)行程序踱稍，你會(huì)發(fā)現(xiàn)什么效果也沒有曲饱。
接下就要執(zhí)行最重要的一步悠抹。
3、重寫drawRect方法
因?yàn)槔L圖操作是在UIView類的drawRect方法中完成的扩淀，所以如果我們要想在一個(gè)UIView中繪圖楔敌，需要寫一個(gè)擴(kuò)展UIView 的類，并重寫drawRect方法驻谆，在這里進(jìn)行繪圖操作卵凑，程序會(huì)自動(dòng)調(diào)用此方法進(jìn)行繪圖。
- (void)drawRect:(CGRect)rect{
//遍歷數(shù)組胜臊，繪制曲線
if(self.lineArray.count > 0){
for (CustomerBezierPath *path in self.lineArray) {
[path.color setStroke];
[path setLineCapStyle:kCGLineCapRound];
[path stroke];
}
}
}
4勺卢、設(shè)置Slider，控制線條粗細(xì)区端。
//設(shè)置線寬的最大值和最小值
self.slider.value = 1;
self.slider.minimumValue = 1;
self.slider.maximumValue = 10;
[self.slider addTarget:self action:@selector(changeLineWidth) forControlEvents:UIControlEventValueChanged];
//修改線寬
- (void)changeLineWidth{
self.boardView.lineWidth = self.slider.value;
}
5值漫、設(shè)置Button
這里說一下橡皮擦的思路，其實(shí)就是將線條顏色變?yōu)榘咨危俅萎嬀€杨何。
而撤銷，就是將存放線條的數(shù)組的最后一個(gè)元素沥邻，也就是最新的線條刪去危虱。
//撤銷
- (IBAction)undo:(id)sender {
[self.boardView.lineArray removeLastObject];
[self.boardView setNeedsDisplay];
}
//清屏
- (IBAction)cleanScreen:(id)sender {
// NSLog(@"%ld",self.boardView.lineArray.count);
[self.boardView.lineArray removeAllObjects];
[self.boardView setNeedsDisplay];
}
//橡皮擦
- (IBAction)eraser:(id)sender {
//修改畫板線條顏色
self.boardView.lineColor = self.boardView.backgroundColor;
}
以上就是iOS簡易涂鴉畫板實(shí)例的大致思路，若有疑問唐全，歡迎與筆者討論埃跷。
