UI高级 一一 画板

本文源代码请参考: https://github.com/coderZYGui/drawingBoard

利用Quartz2D 实现画板功能,效果如下图

功能实现步骤:

1.界面搭建(使用autolayout自动布局),顶部使用Toorbar来管理多个item

中间画板是一个View,底部一个View上放一个UISlider和三个Button,并做布局操作.

2. 实现画线: 每条线都是新的path,所以把每个path都保存在数组中,画线的时候从数组中取出.

3. 设置属性功能: 设置清屏,撤销,UISlider等相关业务逻辑.因为清屏,撤销,橡皮擦,线宽,线色属于画板的功能

因此写在画板类中.

4. 绘制图片到画板: 从系统相册中选择图片后,对图片做拖动,旋转,平移等形变操作. 长按图片时,将图片绘制到画板中.

注意: 这里采用的方式是: 对一个UIView进行截屏操作,在UIView中放置一个UIImageView,将相册的image保存到UIImageView的image中.然后利用UIView的代理属性将图片传给画板的image.

代码如下:

ViewController文件

//
//  ViewController.m
//  DrawingBoard
//
//  Created by 朝阳 on 2017/10/14.
//  Copyright © 2017年 sunny. All rights reserved.
//

#import "ViewController.h"
#import "ZYDrawView.h"
#import "ZYHandleImageView.h"

@interface ViewController ()<UINavigationControllerDelegate,UIImagePickerControllerDelegate,ZYHandleImageViewDelegate>

@property (weak, nonatomic) IBOutlet ZYDrawView *drawView;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
}

// 操作属于谁,写在谁的类中

/**
 清屏
 */
- (IBAction)clear:(UIBarButtonItem *)sender {
    [self.drawView clear];
}

/**
 撤销
 */
- (IBAction)undo:(UIBarButtonItem *)sender {
    [self.drawView undo];
}

/**
 橡皮擦
 */
- (IBAction)eraser:(UIBarButtonItem *)sender {
    [self.drawView eraser];
}

/**
 设置线宽
 */
- (IBAction)setLineWidth:(UISlider *)slider {
    [self.drawView setLineWidth:slider.value];
}

/**
 设置线颜色
 */
- (IBAction)setLineColor:(UIButton *)button {
    [self.drawView setLineColor:button.backgroundColor];
}


/**
 照片
 */
- (IBAction)photo:(UIBarButtonItem *)sender {
    
    //从系统相册中选择一张图片
    //1. 弹出系统相册
    UIImagePickerController *pickerVC = [[UIImagePickerController alloc] init];
    //2. 弹出相册的类型
    pickerVC.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;
    //3. 设置pickerVC代理
    pickerVC.delegate = self;
    //3. modal出系统相册
    [self presentViewController:pickerVC animated:YES completion:nil];
}
#pragma -mark UIImagePickerControllerDelegate
/**
 当选中系统相册中的图片时会调用

 @param picker 系统相册控制器
 @param info 存放图片的字典
 */
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info
{
    NSLog(@"%@",info);
    // 系统相册是一个字典,根据key值来取出图片
    UIImage *image = info[UIImagePickerControllerOriginalImage];
    
    ZYHandleImageView *handleV = [[ZYHandleImageView alloc] initWithFrame:self.drawView.frame];
    handleV.backgroundColor = [UIColor clearColor];
    handleV.image = image;
    // 设置代理属性
    handleV.delegate = self;
    
    [self.view addSubview:handleV];
    
    
    // 系统相册modal消失
    [self dismissViewControllerAnimated:YES completion:nil];
}

#pragma -mark ZYHandleImageViewDelegate
- (void)handleImageView:(ZYHandleImageView *)handleImageView newImage:(UIImage *)newImage
{
    self.drawView.image = newImage;
}

/**
 保存
 */
- (IBAction)save:(UIBarButtonItem *)sender {
    
    //1. 开启一个位图上下文
    UIGraphicsBeginImageContextWithOptions(self.drawView.bounds.size, NO, 0);
    //2. 把drawView上的内容渲染到上下文中
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    [self.drawView.layer renderInContext:ctx];
    //3. 从上下文中生成新的图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //把图片保存到桌面
//    NSData *data = UIImagePNGRepresentation(newImage);
//    [data writeToFile:@"/Users/sunny/Desktop/photo.png" atomically:YES];
    
    //4. 把图片保存到系统相册中
    // 注意: 弹出系统相册必须实现 image:didFinishSavingWithError:contextInfo:方法
    UIImageWriteToSavedPhotosAlbum(newImage, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
}
- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
    NSLog(@"saveSuccess");
}

/**
 隐藏导航
 */
- (BOOL)prefersStatusBarHidden
{
    return YES;
}


@end

ZYDrawView文件(画板)

//
//  ZYDrawView.h
//  DrawingBoard
//
//  Created by 朝阳 on 2017/10/14.
//  Copyright © 2017年 sunny. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ZYDrawView : UIView

@property (nonatomic, strong) UIImage *image;

// 清屏
- (void)clear;
// 撤销
- (void)undo;
// 擦除
- (void)eraser;
// 设置线宽
- (void)setLineWidth:(CGFloat)width;
// 设置线的颜色
- (void)setLineColor:(UIColor *)color;

@end

#import "ZYDrawView.h"
#import "ZYBezierPath.h"

/** 定义类扩展 */
@interface ZYDrawView ()

@property (nonatomic, strong) UIBezierPath *path;
/** 用来保存所有的path */
@property (nonatomic, strong) NSMutableArray *allPaths;
/** 线宽 */
@property (nonatomic, assign) CGFloat width;
/** 线色 */
@property (nonatomic, strong) UIColor *color;

@end

@implementation ZYDrawView

- (NSMutableArray *)allPaths
{
    if (!_allPaths) {
        self.allPaths = [NSMutableArray array];
    }
    return _allPaths;
}

- (void)awakeFromNib
{
    [super awakeFromNib];
    // 添加手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self addGestureRecognizer:pan];
    
    
    
    // 设置一个默认线宽和线色
    self.width = 1;
    self.color = [UIColor blackColor];
    
}

// 清屏
- (void)clear
{
    [self.allPaths removeAllObjects];
    // 重绘
    [self setNeedsDisplay];
}

// 撤销
- (void)undo
{
    [self.allPaths removeLastObject];
    [self setNeedsDisplay];
}

// 擦除
- (void)eraser
{
    [self setLineColor:[UIColor whiteColor]];
}

// 设置线宽
- (void)setLineWidth:(CGFloat)width
{
    self.width = width;
    
}

// 设置线的颜色
- (void)setLineColor:(UIColor *)color
{
    self.color = color;
}

/**
 拖动手势方法
 */
- (void)pan:(UIPanGestureRecognizer *)pan
{
    // 获取当前手指所在的点
    CGPoint curP = [pan locationInView:self];
    // 判断手势状态
    if (pan.state == UIGestureRecognizerStateBegan) {
        // 创建路径
        ZYBezierPath *path = [[ZYBezierPath alloc] init];
        self.path = path;
        
        // 设置线宽
        [path setLineWidth:self.width];
        path.color = self.color;
        
        // 设置起点
        [path moveToPoint:curP];
        // 把路径保存到数组中
        [self.allPaths addObject:self.path];
        
    }else if(pan.state == UIGestureRecognizerStateChanged){
        [self.path addLineToPoint:curP];
        // 重绘,调用drawRect方法
        [self setNeedsDisplay];
    }
}

- (void)setImage:(UIImage *)image
{
    _image = image;
    // 把图片添加到数组中
    [self.allPaths addObject:image];
    // 重绘
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
    
    for (ZYBezierPath *path in self.allPaths) {
        // 判断path的真实类型
        if ([path isKindOfClass:[UIImage class]]) {
            UIImage *image = (UIImage *)path;
            // 把图片绘制到画板中(填充整个区域)
            [image drawInRect:rect];
        }else{
            [path.color set];
            [path stroke];
        }
    }
    
}

@end

ZYBezierPath文件(继承自UIBezierPath,系统UIBezierPath功能不够用)

//
//  ZYBezierPath.h
//  DrawingBoard
//
//  Created by 朝阳 on 2017/10/14.
//  Copyright © 2017年 sunny. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ZYBezierPath : UIBezierPath

@property (nonatomic,strong) UIColor *color;

@end

#import "ZYBezierPath.h"

@implementation ZYBezierPath

@end

ZYHandleImageView文件(分析中的UIView文件,继承UIView)

//
//  ZYHandleImageView.h
//  DrawingBoard
//
//  Created by 朝阳 on 2017/10/14.
//  Copyright © 2017年 sunny. All rights reserved.
//

#import <UIKit/UIKit.h>

@class ZYHandleImageView;
@protocol ZYHandleImageViewDelegate <NSObject>

- (void)handleImageView:(ZYHandleImageView *)handleImageView newImage:(UIImage *)newImage;

@end

@interface ZYHandleImageView : UIView

@property (nonatomic, strong) UIImage *image;

/** 代理属性 */
@property (nonatomic, weak) id<ZYHandleImageViewDelegate> delegate;

@end

#import "ZYHandleImageView.h"
/** 定义类扩展 */
@interface ZYHandleImageView ()<UIGestureRecognizerDelegate>

@property (nonatomic, strong) UIImageView *imageV;

@end

@implementation ZYHandleImageView

- (UIImageView *)imageV
{
    if (!_imageV) {
        UIImageView *imageV = [[UIImageView alloc] initWithFrame:self.bounds];
        imageV.userInteractionEnabled = YES;
        [self addSubview:imageV];
        _imageV = imageV;
        // 添加手势
        [self addGestures];
    }
    return _imageV;
}

- (void)setImage:(UIImage *)image
{
    _image = image;
    self.imageV.image = image;
}

- (void)addGestures
{
    // 拖拽手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]
                                   initWithTarget:self action:@selector(pan:)];
    
    [self.imageV addGestureRecognizer:pan];
    
    // 捏合
    UIPinchGestureRecognizer *pinch = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinch:)];
    
    pinch.delegate = self;
    [self.imageV addGestureRecognizer:pinch];
    
    
    // 添加旋转
    UIRotationGestureRecognizer *rotation = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotation:)];
    rotation.delegate = self;
    
    [self.imageV addGestureRecognizer:rotation];
    
    // 长按
    UILongPressGestureRecognizer *longP = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPress:)];
    [self.imageV addGestureRecognizer:longP];
}

// 拖动的时候调用
- (void)pan:(UIPanGestureRecognizer *)pan
{
    // 手指移动后,相对于坐标中的偏移量
    // 此时的pan.view 就相当于 UIImageView
    CGPoint transP = [pan translationInView:pan.view];
    pan.view.transform = CGAffineTransformTranslate(pan.view.transform, transP.x, transP.y);
    // 复位
    [pan setTranslation:CGPointZero inView:pan.view];
    
}

// 捏合的时候调用
- (void)pinch:(UIPinchGestureRecognizer *)pinch
{
    pinch.view.transform = CGAffineTransformScale(pinch.view.transform, pinch.scale, pinch.scale);
    //复位
    [pinch setScale:1];
}

// 旋转的时候调用
- (void)rotation:(UIRotationGestureRecognizer *)rotation
{
    rotation.view.transform = CGAffineTransformRotate(rotation.view.transform, rotation.rotation);
    //复位
    [rotation setRotation:0];
}

// 长按的时候调用
-(void)longPress:(UILongPressGestureRecognizer *)longPress
{
    // 长按时,图片闪烁一下
    if (longPress.state == UIGestureRecognizerStateBegan) {
        
        [UIView animateWithDuration:0.3 animations:^{
            self.imageV.alpha = 0;
            
        }completion:^(BOOL finished) {
            [UIView animateWithDuration:0.3 animations:^{
                self.imageV.alpha = 1;
                
            }completion:^(BOOL finished) {
                // 把相册中的图片绘制到DrawView上
                //1. 开启一个位图上下文
                UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0);
                //2. 把imageV上的内容绘制到上下文中
                CGContextRef ctx = UIGraphicsGetCurrentContext();
                [self.layer renderInContext:ctx];
                //3. 从上下文中生成新的图片
                UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
                
                //4. 关闭上下文
                UIGraphicsEndImageContext();
                
                // 若要把newImage绘制到DrawView上,需要使用代理进行传值
                if ([self.delegate respondsToSelector:@selector(handleImageView:newImage:)]) {
                    [self.delegate handleImageView:self newImage:newImage];
                }
                
                //从父控件当中移除
                [self removeFromSuperview];
                
            }];
        }];
    }
}

//能够同时支持多个手势
-(BOOL)gestureRecognizer:(nonnull UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(nonnull UIGestureRecognizer *)otherGestureRecognizer{
    
    return YES;
}

@end