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 = 0; 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(60, 150, 200, 100)];
    [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 < 1){
        _lineWidth = 1;
    }
    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(0, 80, 320, 450)];
    [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(0, 20, 50, 30)];
    [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(50, 20, 80, 30)];
    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 = 0; i < colors.count; i++) {
        CGFloat x =  140 + 30 * i;
        UIButton *colorBtn = [[UIButton alloc] initWithFrame:CGRectMake(x, 25, 20, 20)];
        [colorBtn setBackgroundColor:[colors objectAtIndex:i]];
        [colorBtn addTarget:self action:@selector(setLineColor:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:colorBtn];
    }
    
   
    //第二行
    //3、添加撤销按钮
    UIButton *cancelBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 55, 60, 25)];
    [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(70, 55, 60, 25)];
    [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(140, 55, 60, 25)];
    [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(210, 55, 100, 25)];
    [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 < 5) self.paintV.lineWidth = 5;
}
//撤销
- (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