[iOS UI进阶

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=0; i<line.count; i++) {
            NSValue *pointValue = line[i];
            CGPoint point = [pointValue CGPointValue];
           
            // 如果是线的第一个点，要先移动画笔到那个点
            if (0 == i) {
                CGContextMoveToPoint(ctx, point.x, point.y);
            } else {
                CGContextAddLineToPoint(ctx, point.x, point.y);
            }
        }
    }
   
    // 设置线宽、线头样式、线转折样式
    CGContextSetLineWidth(ctx, 5);
    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