Quartz2D复习（三） --- 涂鸦

和上一篇手势解锁不一样，手势解锁只画了一条路径，从触摸开始--》触摸移动--》触摸结束 ，然后路径完成了，渲染出来就是手势解锁了；

这次涂鸦想做到的效果是可以画很多次线段或弧，每次又可以设置不同的宽度和颜色，然后还要有撤销、清屏、橡皮擦的功能，那就需要画很多条路径了，然后每条路径有自己的颜色和宽度，那么

UIBezierPath类也实现不了，需要自定义一个类，继承自UIBezierPath，然后再增加自己的颜色和宽度属性。

效果截图：

  涂鸦了   橡皮擦擦除 

保存到相册

代码：

1、自定义PaintingBezierPath类继承自UIBezierPath类，增加一个自定义路径颜色的属性；自定义构造函数，设置颜色和路径宽度

PaintingBezierPath.h文件代码：

#import <UIKit/UIKit.h>
 
@interface PaintingBezierPath : UIBezierPath
 
@property (nonatomic, retain) UIColor *color; //线段的颜色
 
- (instancetype)initWithColor: (UIColor *)color WithWidth: (CGFloat)width WithStartPoint: (CGPoint)startPoint;
 
@end

PaintingBezierPath.m文件代码：

 //
 //  PaintingBezierPath.m
 //  tan_iosTwo
 //
 //  Created by xiaom on 15/7/22.
 //
 //  为了自定义每个轨迹的宽度和颜色，需要增加一个自定义方法
 
 #import "PaintingBezierPath.h"
 
 @implementation PaintingBezierPath
 
 - (instancetype)initWithColor:(UIColor *)color WithWidth:(CGFloat)width WithStartPoint:(CGPoint)startPoint{
     if (self = [super init]){
         self.color = color;
         self.lineWidth = width;
         self.lineJoinStyle = kCGLineJoinRound;
         self.lineCapStyle = kCGLineCapRound;
         [self moveToPoint:startPoint];
     }
     return self;
 }
 
 @end

2、自定义view, 用来展示涂鸦，名称为：PaintingView

PaintingView.h文件代码：

#import <UIKit/UIKit.h>
 
@interface PaintingView : UIView
 
@property (nonatomic, assign) CGFloat lineWidth; //涂鸦的线段宽度
@property (nonatomic, strong) UIColor *lineColor; //涂鸦的线段颜色
 
- (void)cancelPainting; //撤销涂鸦
- (void)clearScreen; //清屏
- (void)saveImgToAlbum; //保存相片到到手机相册里
 
@end

PaintingView.m文件代码：

 //  绘画, 涂鸦
 
 #import "PaintingView.h"
 #import "PaintingBezierPath.h"
 
 @interface PaintingView()
 
 @property (nonatomic, retain) NSMutableArray *paths; //涂鸦路径数组
 @property (nonatomic, retain) PaintingBezierPath *currentPath; //当前正在绘制的path
 
 @end
 
 @implementation PaintingView
 
 //代码创建对象会调用: 使用
 - (instancetype)initWithFrame:(CGRect)frame{
     if (self = [super initWithFrame:frame]){
         //NSLog(@"frame...%s", __func__);
     }
     return self;
 }
 
 //xib创建会调用
 - (instancetype)initWithCoder:(NSCoder *)aDecoder{
     if (self = [super initWithCoder:aDecoder]){
         //NSLog(@"coder.. %s", __func__);
     }
     return self;
 }
 
 //监听触摸开始 ,方法继承自UIResponder
 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
     PaintingBezierPath *path = [[PaintingBezierPath alloc] initWithColor:self.lineColor WithWidth:self.lineWidth WithStartPoint:[self currentPoint:touches]];
 
     [self.paths addObject:path]; //将路径记录到数组中
     self.currentPath = path;
 
     [self setNeedsDisplay];  //调用方法，重新绘制
 }
 
 //监听触摸移动中
 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
     //追踪每次路径的移动过程
     [self.currentPath addLineToPoint:[self currentPoint:touches]];
 
     [self setNeedsDisplay]; //调用方法，重新绘制
 }
 
 //获取view对象中的当前位置
 - (CGPoint)currentPoint: (NSSet *)touches{
     UITouch *touch = [touches anyObject];
     return [touch locationInView:self];
 }
 
 //次方法是UIView的分类@interface UIView(UIViewRendering)中添加的方法
 //setNeedsDisplay方法也是此分类中的方法
 - (void)drawRect:(CGRect)rect{
     for (int i = ; i < self.paths.count; i++) {
         PaintingBezierPath *path = [self.paths objectAtIndex:i];
         [path.color set];
         [path stroke];  //渲染
     }
 }
 
 #pragma mark - 自定义方法实现
 //撤销
 - (void)cancelPainting{
     [self.paths removeLastObject]; //移除最后一个路径对象
     [self setNeedsDisplay]; //重新绘制
 }
 
 //清屏
 - (void)clearScreen{
     [self.paths removeAllObjects]; //移除所有路径
     self.lineColor = nil; //颜色赋空
     [self setNeedsDisplay]; //重新绘制
 }
 
 //保存图片到相册
 - (void)saveImgToAlbum{
     //1、开启图形上下文
     UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0.0);
     //2、获取当前上下文
     CGContextRef ctr = UIGraphicsGetCurrentContext();
     //3、渲染当前View的图层到上下文中
     [self.layer renderInContext:ctr];
     //4、获取新图片
     UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext();
     //5、关闭图形上下文
     UIGraphicsEndImageContext();
     //6、保存图片到相册中
     UIImageWriteToSavedPhotosAlbum(newImg, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
 }
 
 //保存图片到相册完成之后的处理
 - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{
     UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
     [lbl setBackgroundColor:[UIColor blackColor]];
     lbl.textAlignment = NSTextAlignmentCenter;
     lbl.textColor = [UIColor yellowColor];
 
     if (error){ //保存失败
         lbl.text = @"保存失败";
     }
     else{ //保存成功
         lbl.text = @"保存成功";
     }
     [self addSubview:lbl];
 
     [UIView animateWithDuration:2.0 animations:^{
         lbl.alpha = 0.1;
     } completion:^(BOOL finished) {
         [lbl removeFromSuperview];
     }];
 }
 
 //设置对象默认属性值
 - (CGFloat)lineWidth{
     if (_lineWidth < ){
         _lineWidth = ;
     }
     return _lineWidth;
 }
 
 - (UIColor *)lineColor{
     if (_lineColor == nil){
         _lineColor = [UIColor blackColor];
     }
     return _lineColor;
 }
 
 - (NSMutableArray *)paths{
     if (_paths == nil){
         _paths = [[NSMutableArray alloc] init];
     }
     return _paths;
 }
 
 /*
 // Only override drawRect: if you perform custom drawing.
 // An empty implementation adversely affects performance during animation.
 - (void)drawRect:(CGRect)rect {
     // Drawing code
 }
 */
 
 @end

3、自定义控制器展示PaintingView

DoodleViewController.h文件：

#import <UIKit/UIKit.h>
 
@interface DoodleViewController : UIViewController
 
@end

DoodleViewController.m

 //  信手涂鸦
 
 #import "DoodleViewController.h"
 #import "PaintingView.h"
 
 @interface DoodleViewController ()
 
 @property (nonatomic, retain) PaintingView *paintV; //涂鸦的画板
 
 @end
 
 @implementation DoodleViewController
 
 - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view.
     [self.view setBackgroundColor:[UIColor whiteColor]];
 
     //自定义View涂鸦
     PaintingView *v = [[PaintingView alloc] initWithFrame:CGRectMake(, , , )];
     [v setBackgroundColor:[UIColor grayColor]];
     [v setAlpha:0.6];
     [self.view addSubview:v];
     self.paintV = v;
 
     [self addReturnBtn];    //添加返回按钮
     [self addDoodleSetWidthAndColor]; //增加设置涂鸦的宽度和颜色设置
 }
 
 //添加返回按钮
 - (void)addReturnBtn{
     UIButton *returnBtn = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
     [returnBtn setTitle:@"返回" forState:UIControlStateNormal];
     [returnBtn addTarget:self action:@selector(returnPrePage) forControlEvents:UIControlEventTouchUpInside];
     [returnBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
     [self.view addSubview:returnBtn];
 }
 
 //添加涂鸦宽度设置和颜色设置
 - (void)addDoodleSetWidthAndColor{
     //1、增加UISlider用来设置可调节宽度
     UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(, , , )];
     slider.maximumValue = 15.0f; //最大值
     slider.value = 3.0f;    //默认为1
     self.paintV.lineWidth = slider.value;
     [slider addTarget:self action:@selector(setLineWidth:) forControlEvents:UIControlEventValueChanged]; //绑定值改变事件
     [self.view addSubview:slider];
 
     //2、添加颜色选择按钮
     NSArray *colors = @[[UIColor redColor], [UIColor yellowColor], [UIColor greenColor], [UIColor blueColor], [UIColor purpleColor], [UIColor brownColor]];
     for (int i = ; i < colors.count; i++) {
         CGFloat x =   +  * i;
         UIButton *colorBtn = [[UIButton alloc] initWithFrame:CGRectMake(x, , , )];
         [colorBtn setBackgroundColor:[colors objectAtIndex:i]];
         [colorBtn addTarget:self action:@selector(setLineColor:) forControlEvents:UIControlEventTouchUpInside];
         [self.view addSubview:colorBtn];
     }
 
     //第二行
     //3、添加撤销按钮
     UIButton *cancelBtn = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
     [cancelBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
     [cancelBtn setTitle:@"撤销" forState:UIControlStateNormal];
     [cancelBtn addTarget:self action:@selector(cancelPainting) forControlEvents:UIControlEventTouchUpInside];
     [self.view addSubview:cancelBtn];
 
     //4、清屏按钮
     UIButton *clearScreenBtn = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
     [clearScreenBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
     [clearScreenBtn setTitle:@"清屏" forState:UIControlStateNormal];
     [clearScreenBtn addTarget:self action:@selector(clearScreen) forControlEvents:UIControlEventTouchUpInside];
     [self.view addSubview:clearScreenBtn];
 
     //5、添加一个橡皮擦
     UIButton *brushBtn = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
     [brushBtn setTitle:@"橡皮擦" forState:UIControlStateNormal];
     [brushBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
     [brushBtn addTarget:self action:@selector(brush) forControlEvents:UIControlEventTouchUpInside];
     [self.view addSubview:brushBtn];
 
     //6、保存到相册按钮
     UIButton *saveBtn = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
     [saveBtn setTitle:@"保存到相册" forState:UIControlStateNormal];
     [saveBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
     [saveBtn addTarget:self action:@selector(saveImgToAlbum) forControlEvents:UIControlEventTouchUpInside];
     [self.view addSubview:saveBtn];
 }
 
 //调节宽度
 - (void)setLineWidth:(UISlider *)sender{
     [self.paintV setLineWidth:sender.value];
 }
 
 //调节颜色
 - (void)setLineColor: (UIButton *)sender{
     [self.paintV setLineColor:sender.backgroundColor];
 }
 
 //设置橡皮擦
 - (void)brush{
     self.paintV.lineColor = self.paintV.backgroundColor;
     if (self.paintV.lineWidth < ) self.paintV.lineWidth = ;
 }
 //撤销
 - (void)cancelPainting{
     [self.paintV cancelPainting];
 }
 //清屏
 - (void)clearScreen{
     [self.paintV clearScreen];
 }
 
 //保存图片到相册
 - (void)saveImgToAlbum{
     [self.paintV saveImgToAlbum];
 }
 
 //返回上一页
 - (void)returnPrePage{
     [self dismissViewControllerAnimated:YES completion:nil];
 }
 
 - (void)didReceiveMemoryWarning {
     [super didReceiveMemoryWarning];
     // Dispose of any resources that can be recreated.
 }
 
 /*
 #pragma mark - Navigation
 
 // In a storyboard-based application, you will often want to do a little preparation before navigation
 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
     // Get the new view controller using [segue destinationViewController].
     // Pass the selected object to the new view controller.
 }
 */
 
 @end