[iOS UI进阶 - 4.0] 涂鸦app Demo

A.需求

1.超简易画图，只有一种画笔

2.清屏功能

3.回退功能

4.保存功能

5.使用了cocos2D

 

code source: https://github.com/hellovoidworld/PaintDemo

 

 

B.实现方法1

1.基本界面

（1）3个按钮：清屏、回退、保存

（2）绘图view

 

2.画线

（1）使用数组存储绘图点：存储一条线的数组、存储所有线的总数组

（2）在touch的开始、拖曳、结束记录触摸位置，触发重绘

 

3.清屏

删除总数组

 

4.回退

删除最后画的一条线：删除相应数组

 

5.保存到相册

使用”截图”功能，保存绘图view

 //
 //  PaintView.m
 //  PaintDemo
 //
 //  Created by hellovoidworld on 15/1/10.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "PaintView.h"
 #import "UIImage+Extension.h"

 @interface PaintView()

 @end

 @implementation PaintView

 - (NSMutableArray *)lines {
     if (nil == _lines) {
         _lines = [NSMutableArray array];
     }
     return _lines;
 }

 #pragma mark - 触摸事件
 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
     UITouch *touch = [touches anyObject];
     CGPoint startLocation = [touch locationInView:touch.view];

     // 开启一条新的线
     NSMutableArray *points = [NSMutableArray array];
     // 存储点信息到线上
     [points addObject:[NSValue valueWithCGPoint:startLocation]];
     // 存储到线组上
     [self.lines addObject:points];

     // 重绘
     [self setNeedsDisplay];
 }

 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
     UITouch *touch = [touches anyObject];
     CGPoint location = [touch locationInView:touch.view];

     // 拿到正在画的线
     NSMutableArray *points = [self.lines lastObject];
     // 添加点信息
     [points addObject:[NSValue valueWithCGPoint:location]];

     // 重绘
     [self setNeedsDisplay];
 }

 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
     // 停止拖曳的逻辑其实和拖曳中是一样的
     [self touchesMoved:touches withEvent:event];
 }

 #pragma mark - 绘图方法
 /** 绘图 */
 - (void)drawRect:(CGRect)rect {
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 遍历线组，把所有线画出来
     for (NSArray *line in self.lines) {
         for (int i=; i<line.count; i++) {
             NSValue *pointValue = line[i];
             CGPoint point = [pointValue CGPointValue];

             // 如果是线的第一个点，要先移动画笔到那个点
             if ( == i) {
                 CGContextMoveToPoint(ctx, point.x, point.y);
             } else {
                 CGContextAddLineToPoint(ctx, point.x, point.y);
             }
         }
     }

     // 设置线宽、线头样式、线转折样式
     CGContextSetLineWidth(ctx, );
     CGContextSetLineCap(ctx, kCGLineCapRound);
     CGContextSetLineJoin(ctx, kCGLineJoinRound);

     // 渲染
     CGContextStrokePath(ctx);
 }

 #pragma mark - view操作方法
 /** 回退 */
 - (void)rollback {
     [self.lines removeLastObject];
     [self setNeedsDisplay];
 }

 /** 清屏 */
 - (void)clearScreen {
     [self.lines removeAllObjects];
     [self setNeedsDisplay];
 }

 /** 保存 */
 - (void)save {
     // 1.获取图片
     UIImage *image = [UIImage imageOfView:self];

     // 2.保存图片到相册
     UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
 }

 /** 保存图片后激发事件
 * 这是文档推荐的方法
 */
 - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {
     if (error) {
         NSLog(@"保存失败");
     } else {
         NSLog(@"保存成功");
     }
 }

 @end

 

 //
 //  UIImage+Extension.m
 //  PaintDemo
 //
 //  Created by hellovoidworld on 15/1/11.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "UIImage+Extension.h"

 @implementation UIImage(Extension)

 + (UIImage *) imageOfView:(UIView *) view {
     // 1.开启图片上下文
     UIGraphicsBeginImageContextWithOptions(view.frame.size, NO, 0.0);

     // 2.将view的layer渲染到上下文
     [view.layer renderInContext:UIGraphicsGetCurrentContext()];

     // 3.获取上下文中的图片
     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

     // 4.关闭图片上下文
     UIGraphicsEndImageContext();

     return image;
 }

 @end

 

C.实现方法2

1.基本界面和方法1一样

 

2.画线

（1）使用贝塞尔路径UIBezierPath，一条线就是一个UIBezierPath对象

（2）同样使用数组来存储UIBezierPath对象

 

3.清屏、回退、保存和方法1一样

 

 //
 //  BezierPaintView.m
 //  PaintDemo
 //
 //  Created by hellovoidworld on 15/1/11.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "BezierPaintView.h"
 #import "UIImage+Extension.h"

 @implementation BezierPaintView

 - (NSMutableArray *)lines {
     if (nil == _lines) {
         _lines = [NSMutableArray array];
     }
     return _lines;
 }

 #pragma mark - 触摸事件
 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
     UITouch *touch = [touches anyObject];
     CGPoint startLocation = [touch locationInView:touch.view];

     // 新建一条Bezier线
     UIBezierPath *path = [UIBezierPath bezierPath];
     [path setLineWidth:5.0];
     [path setLineCapStyle:kCGLineCapRound];
     [path setLineJoinStyle:kCGLineJoinRound];

     // 移动到始点
     [path moveToPoint:startLocation];
     // 添加Bezier线到数组
     [self.lines addObject:path];

     // 重绘
     [self setNeedsDisplay];
 }

 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
     UITouch *touch = [touches anyObject];
     CGPoint location = [touch locationInView:touch.view];

     // 获得正在画的线
     UIBezierPath *path = [self.lines lastObject];
     // 画线-添加点信息
     [path addLineToPoint:location];

     // 重绘
     [self setNeedsDisplay];
 }

 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
     // 停止拖曳的逻辑其实和拖曳中是一样的
     [self touchesMoved:touches withEvent:event];
 }

 #pragma mark - 绘图方法
 /** 绘图 */
 - (void)drawRect:(CGRect)rect {

     // 画出所有的线
     for (UIBezierPath *path in self.lines) {
         // 渲染
         [path stroke];
     }

 }

 #pragma mark - view操作方法
 /** 回退 */
 - (void)rollback {
     [self.lines removeLastObject];
     [self setNeedsDisplay];
 }

 /** 清屏 */
 - (void)clearScreen {
     [self.lines removeAllObjects];
     [self setNeedsDisplay];
 }

 /** 保存 */
 - (void)save {
     // 1.获取图片
     UIImage *image = [UIImage imageOfView:self];

     // 2.保存图片到相册
     UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
 }

 /** 保存图片后激发事件
 * 这是文档推荐的方法
 */
 - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {
     if (error) {
         NSLog(@"保存失败");
     } else {
         NSLog(@"保存成功");
     }
 }

 @end

 

 

 

D.附加功能

• slider控件调整线宽
• 选择颜色

 

 

1.slider调整线宽

（1）使用slider控件

（2）通过slider的valueChange事件调用方法设置线宽

 

2.选择颜色

（1）创建一个“色块”类

• 使用UIView作为色块
• 自定义一个继承UIView的类，作为色块class，给色块UIView加上点击事件
• 给色块UIView创建一个颜色属性和代理协议，代理是ViewController；创建一个点击代理事件方法

 //
 //  ColorSelectionView.h
 //  PaintDemo
 //
 //  Created by hellovoidworld on 15/1/11.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @protocol ColorSelectionViewDelegate <NSObject>

 /** “色块”点击代理方法 */
 @optional
 - (void) selectColor:(UIColor *) selectedColor;

 @end

 @interface ColorSelectionView : UIView

 /** 代理 */
 @property(nonatomic, strong) id<ColorSelectionViewDelegate> delegate;

 @end

 //
 //  ColorSelectionView.m
 //  PaintDemo
 //
 //  Created by hellovoidworld on 15/1/11.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "ColorSelectionView.h"

 @implementation ColorSelectionView

 - (void)awakeFromNib {
     // 给UIView设置点击事件
     UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(colorClicked)];
     [self addGestureRecognizer:tapGesture];
 }

 /** “色块”点击事件 */
 - (void) colorClicked {
     [self.delegate selectColor:self.backgroundColor];
 }

 @end

 

（2）自定义一个继承UIBezierPath的类，增加一个线颜色的属性

 //
 //  HVWBezierPath.h
 //  PaintDemo
 //
 //  Created by hellovoidworld on 15/1/11.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @interface HVWBezierPath : UIBezierPath

 /** 颜色 */
 @property(nonatomic, strong) UIColor *color;

 @end

 

（3）ViewController代理“色块”的点击事件

• 拖入所有“色块”对象到ViewController，设置代理
• 遵守“色块”协议，实现代理方法

 

 //
 //  ViewController.m
 //  PaintDemo
 //
 //  Created by hellovoidworld on 15/1/10.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "ViewController.h"
 #import "BezierPaintView.h"
 #import "ColorSelectionView.h"

 @interface ViewController () <ColorSelectionViewDelegate>

 @property (weak, nonatomic) IBOutlet BezierPaintView *paintView;

 /** 颜色选择集合 */
 @property (strong, nonatomic) IBOutletCollection(ColorSelectionView) NSArray *colorSelection;

 - (IBAction)rollback;
 - (IBAction)clearScreen;
 - (IBAction)save;
 - (IBAction)lineWidthChange:(UISlider *)sender;

 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.

     // 设置颜色选择器的代理
     for (ColorSelectionView *colorView in self.colorSelection) {
         colorView.delegate = self;
     }
 }

 - (void)didReceiveMemoryWarning {
     [super didReceiveMemoryWarning];
     // Dispose of any resources that can be recreated.
 }

 /** 回退 */
 - (IBAction)rollback {
     [self.paintView rollback];
 }

 /** 清屏 */
 - (IBAction)clearScreen {
     [self.paintView clearScreen];
 }

 /** 保存 */
 - (IBAction)save {
     [self.paintView save];
 }

 /** 改变线粗 */
 - (IBAction)lineWidthChange:(UISlider *)sender {
     self.paintView.lineWidth = sender.value;
 }

 #pragma mark - ColorSelectionViewDelegate 代理方法
 - (void) selectColor:(UIColor *) selectedColor {
     self.paintView.lineColor = selectedColor;
 }

@end

 

（4）“画板”在开始画一条线的时候（触摸开始），设置线宽和颜色

 //
 //  BezierPaintView.m
 //  PaintDemo
 //
 //  Created by hellovoidworld on 15/1/11.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "BezierPaintView.h"
 #import "UIImage+Extension.h"
 #import "HVWBezierPath.h"

 @interface BezierPaintView()

 @end

 @implementation BezierPaintView

 - (NSMutableArray *)lines {
     if (nil == _lines) {
         _lines = [NSMutableArray array];
     }
     return _lines;
 }

 #pragma mark - 触摸事件
 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
     UITouch *touch = [touches anyObject];
     CGPoint startLocation = [touch locationInView:touch.view];

     // 新建一条Bezier线
     HVWBezierPath *path = [[HVWBezierPath alloc] init];

     // 配置线粗
     if (self.lineWidth) {
         [path setLineWidth:self.lineWidth];
     }

     // 配置线色
     if (self.lineColor) {
         path.color = self.lineColor;
     }

     [path setLineCapStyle:kCGLineCapRound];
     [path setLineJoinStyle:kCGLineJoinRound];

     // 移动到始点
     [path moveToPoint:startLocation];
     // 添加Bezier线到数组
     [self.lines addObject:path];

     // 重绘
     [self setNeedsDisplay];
 }

 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
     UITouch *touch = [touches anyObject];
     CGPoint location = [touch locationInView:touch.view];

     // 获得正在画的线
     HVWBezierPath *path = [self.lines lastObject];
     // 画线-添加点信息
     [path addLineToPoint:location];

     // 重绘
     [self setNeedsDisplay];
 }

 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
     // 停止拖曳的逻辑其实和拖曳中是一样的
     [self touchesMoved:touches withEvent:event];
 }

 #pragma mark - 绘图方法
 /** 绘图 */
 - (void)drawRect:(CGRect)rect {

     // 画出所有的线
     for (HVWBezierPath *path in self.lines) {

         // 设置颜色
         if (path.color) {
             [path.color set];
         }

         // 渲染
         [path stroke];
     }

 }

 #pragma mark - view操作方法
 /** 回退 */
 - (void)rollback {
     [self.lines removeLastObject];
     [self setNeedsDisplay];
 }

 /** 清屏 */
 - (void)clearScreen {
     [self.lines removeAllObjects];
     [self setNeedsDisplay];
 }

 /** 保存 */
 - (void)save {
     // 1.获取图片
     UIImage *image = [UIImage imageOfView:self];

     // 2.保存图片到相册
     UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
 }

 /** 保存图片后激发事件
 * 这是文档推荐的方法
 */
 - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {
     if (error) {
         NSLog(@"保存失败");
     } else {
         NSLog(@"保存成功");
     }
 }

 @end