UI进阶--Quartz2D和触摸事件的简单使用：简易涂鸦板

需求：实现一个简易的涂鸦板应用，使用鼠标在涂鸦板内拖动即可进行涂鸦，点击保存按钮，可以把完成的涂鸦保存，点击回退按钮可以向后退回一步，点击清空可以让涂鸦板清空。

实现步骤：

1、布局storyboard，连线各按钮以及涂鸦板；

2、监听触摸事件，主要为touchesBegan:和touchesMoved:;

3、获取移动的路径并添加到 UIBezierPath 对象；

4、渲染；

示例文件结构：

具体实现代码：

//
//  Scrawl.h
//  1-04-Scrawl
//
//  Created by xiaomoge on 15/1/4.
//  Copyright (c) 2015年 xiaomoge. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface Scrawl : UIView
/*
 涂鸦线条的宽度
 */
@property (nonatomic,assign) CGFloat linsWidth;
/*
 回退
 */
- (void)back;
/*
 清屏
 */
- (void)clear;
@end

//
//  Scrawl.m
//  1-04-Scrawl
//
//  Created by xiaomoge on 15/1/4.
//  Copyright (c) 2015年 xiaomoge. All rights reserved.
//

#import "Scrawl.h"
@interface Scrawl ()
/*
 存储所有线的路径的数组
 */
@property (nonatomic,strong) NSMutableArray *linsPath;
@end
@implementation Scrawl
#pragma mark - 懒加载
- (NSMutableArray *)linsPath {
    if (!_linsPath) {
        _linsPath = [NSMutableArray array];
    }
    return _linsPath;
}
- (void)drawRect:(CGRect)rect {
    //获得当前数组中的总数
    NSInteger count = self.linsPath.count;
    for (NSInteger i = 0; i < count; i ++) {
        //取得一个path对象
        UIBezierPath *path = self.linsPath[i];
        //设置线宽
        path.lineWidth = self.linsWidth;
        //设置线的首尾样式
        path.lineCapStyle = kCGLineCapRound;
        //设置线的连接样式
        path.lineJoinStyle = kCGLineJoinRound;
        //渲染
        [path stroke];
    }
}
//开始触摸事件
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    //取得当前触摸点的位置
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:touch.view];
    //创建一个path对象，注意这里是[UIBezierPath bezierPath]
    UIBezierPath *path = [UIBezierPath bezierPath];
    //创建path对象的起点位置
    [path moveToPoint:point];
    //添加到线的路径数组中
    [self.linsPath addObject:path];
}
//移动触摸事件
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    //取得当前触摸点的位置
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:touch.view];
    //创建一个path对象，为线的路径当前的点
    UIBezierPath *path = [self.linsPath lastObject];
    //设置path对象的结束点
    [path addLineToPoint:point];
    //重绘
    [self setNeedsDisplay];
}
//回退事件
- (void)back {
    //回退其实就是把最后的一条线给清除
    [self.linsPath removeLastObject];
    //然后重绘
    [self setNeedsDisplay];
}
- (void)clear {
    //回退其实就是把所有的线给清除掉
    [self.linsPath removeAllObjects];
    //然后重绘
    [self setNeedsDisplay];
}
@end

//
//  ViewController.m
//  1-04-Scrawl
//
//  Created by xiaomoge on 15/1/4.
//  Copyright (c) 2015年 xiaomoge. All rights reserved.
//

#import "ViewController.h"
#import "Scrawl.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet Scrawl *scrawlView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.scrawlView.linsWidth = 3;
}
- (IBAction)backClick {
    [self.scrawlView back];
}
- (IBAction)clearClick {
    [self.scrawlView clear];
}
- (IBAction)saveClick {
    //开启位图上下文
    UIGraphicsBeginImageContext(self.scrawlView.frame.size);
    //渲染
    [self.scrawlView.layer renderInContext:UIGraphicsGetCurrentContext()];
    //获取当前位图上下文里的图片
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    //结束位图上下文的编辑
    UIGraphicsEndImageContext();
    //把图片转为NSData
    NSData *data = UIImagePNGRepresentation(img);
    //保存
    [data writeToFile:@"/Users/xiaobao/Desktop/scrawl.png" atomically:YES];
    //注意，这里其实也可以把这个保存图片抽取成一个方法，然后调用即可。
}
@end

最后的效果(点击保存按钮保存下来的整个涂鸦板)：