iOS

1、绘制画板

1.1 绘制简单画板

• PaintBoardView.h

  	@interface PaintBoardView : UIView
  	
  	@end
  

• PaintBoardView.m

  	@interface PaintBoardView ()
  	
  	/// 路径
  	@property (nonatomic, strong) UIBezierPath *path;
  	
  	/// 保存所有路径的数组
  	@property (nonatomic, strong) NSMutableArray *pathsArrayM;
  	
  	@end
  	
  	@implementation PaintBoardView
  	
  	/// 初始化
  	- (instancetype)initWithFrame:(CGRect)frame {
  	    
  	    if (self = [super initWithFrame:frame]) {
  	        self.backgroundColor = [UIColor whiteColor];
  	    }
  	    return self;
  	}
  
  	/// 触摸开始
  	- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {
  	    
  	    // 获取触摸起始点位置
  	    CGPoint startPoint = [touches.anyObject locationInView:self];
  	    
  	    // 添加路径描绘起始点
  	    [self.path moveToPoint:startPoint];
  	    
  	    // 添加一条触摸路径描绘
  	    [self.pathsArrayM addObject:self.path];
  	}
  	
  	/// 触摸移动
  	- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {
  	    
  	    // 获取触摸点位置
  	    CGPoint touchPoint = [touches.anyObject locationInView:self];
  	    
  	    // 添加路径描绘
  	    [self.path addLineToPoint:touchPoint];
  	    
  	    // 刷新视图
  	    [self setNeedsDisplay];
  	}
  	
  	/// 触摸结束
  	- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {
  
  		// 获取绘制结果
  		UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0);
  		CGContextRef ctx = UIGraphicsGetCurrentContext();
  		[self.layer renderInContext:ctx];
  		UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  		UIGraphicsEndImageContext();
  		    
  		NSData *data = UIImagePNGRepresentation(image);
  		[data writeToFile:@"/Users/JHQ0228/Desktop/Images/pic.png" atomically:YES];
  	}
  	
  	/// 触摸取消
  	- (void)touchesCancelled:(NSSet *)touches withEvent:(nullable UIEvent *)event {
  	    [self touchesEnded:touches withEvent:event];
  	}
  	
  	/// 绘制图形
  	- (void)drawRect:(CGRect)rect {
  	    
  	    for (UIBezierPath *path in self.pathsArrayM) {
  	        
  	        // 绘制路径
  	        [path stroke];
  	    }
  	}
  	
  	/// 懒加载
  	
  	- (UIBezierPath *)path {
  	    
  	    if (_path == nil) {
  	        _path = [UIBezierPath bezierPath];
  	    }
  	    return _path;
  	}
  	
  	- (NSMutableArray *)pathsArrayM {
  	    
  	    if (_pathsArrayM == nil) {
  	        _pathsArrayM = [NSMutableArray array];
  	    }
  	    return _pathsArrayM;
  	}
  	
  	@end
  

• ViewController.m

      // 创建画板
      CGRect frame = CGRectMake(20, 50, self.view.bounds.size.width - 40, 200);
      PaintBoardView *paintBoard = [[PaintBoardView alloc] initWithFrame:frame];
      
      [self.view addSubview:paintBoard];
  

• 效果

  

1.2 绘制画板封装

• 具体实现代码见 GitHub 源码 QExtension

• QPaintBoardPath.h

  	@interface QPaintBoardPath : UIBezierPath
  	
  	/// 线的颜色
  	@property (nonatomic, strong) UIColor *pathColor;
  	
  	/// 线的宽度
  	@property (nonatomic, assign) CGFloat pathWidth;
  	
  	@end
  

• QPaintBoardPath.m

  	@implementation QPaintBoardPath
  	
  	@end
  

• QPaintBoardView.h

  	@interface QPaintBoardView : UIView
  	
  	/// 画线的宽度，default is 1，max is 30
  	@property (nonatomic, assign) CGFloat paintLineWidth;
  	
  	/// 画笔的颜色，default is blackColor
  	@property (nonatomic, strong) UIColor *paintLineColor;
  	
  	/// 画板的颜色，default is whiteColor
  	@property (nonatomic, strong) UIColor *paintBoardColor;
  	
  	/**
  	 *  创建画板视图控件，获取绘画结果
  	 *
  	 *  @param frame        画板视图控件 frame
  	 *  @param lineWidth    画笔的线宽，default is 1，max is 30
  	 *  @param lineColor    画笔的颜色，default is blackColor
  	 *  @param boardColor   画板的颜色，default is whiteColor
  	 *  @param result       绘画结果
  	 *
  	 *  @return 手势锁视图控件
  	 */
  	+ (instancetype)q_paintBoardViewWithFrame:(CGRect)frame
  	                                lineWidth:(CGFloat)lineWidth
  	                                lineColor:(nullable UIColor *)lineColor
  	                               boardColor:(nullable UIColor *)boardColor
  	                              paintResult:(void (^)(UIImage * _Nullable image))result;
  	
  	/**
  	 *  创建简单画板视图控件
  	 *
  	 *  @param frame    画板视图控件 frame
  	 *
  	 *  @return 手势锁视图控件
  	 */
  	+ (instancetype)q_paintBoardViewWithFrame:(CGRect)frame;
  	
  	/**
  	 *  获取绘画结果
  	 *
  	 *  @return 绘画结果图片
  	 */
  	- (UIImage * _Nullable)q_getPaintImage;
  	
  	/**
  	 *  清除绘画结果
  	 */
  	- (void)q_clear;
  	
  	/**
  	 *  撤销绘画结果
  	 */
  	- (void)q_back;
  	
  	@end
  

• QPaintBoardView.m

  	#import "QPaintBoardPath.h"
  
  	@interface QPaintBoardView ()
  	
  	/// 路径
  	@property (nonatomic, strong, nullable) QPaintBoardPath *path;
  	
  	/// 保存所有路径的数组
  	@property (nonatomic, strong) NSMutableArray *pathsArrayM;
  	
  	/// 绘画结果
  	@property (nonatomic, copy) void (^resultBlock)(UIImage * _Nullable);
  	
  	/// 按钮工具条
  	@property (nonatomic, strong) UIView *toolView;
  	
  	/// 画笔设置视图
  	@property (nonatomic, strong) UIView *brushSetingView;
  	
  	/// 颜色选择视图
  	@property (nonatomic, strong) UIScrollView *colorSelectedView;
  	
  	/// 画板设置视图
  	@property (nonatomic, strong) UIScrollView *boardSetingView;
  	
  	/// 记录线的颜色
  	@property (nonatomic, strong) UIColor *lastPaintLineColor;
  	
  	/// 记录线的宽度
  	@property (nonatomic, assign) CGFloat lastPaintLineWidth;
  	
  	@end
  	
  	@implementation QPaintBoardView
  	
  	#pragma mark - 创建画板
  	
  	/// 创建画板视图控件，获取绘画结果
  	+ (instancetype)q_paintBoardViewWithFrame:(CGRect)frame
  	                                lineWidth:(CGFloat)lineWidth
  	                                lineColor:(nullable UIColor *)lineColor
  	                               boardColor:(nullable UIColor *)boardColor
  	                              paintResult:(void (^)(UIImage * _Nullable image))result {
  	    
  	    QPaintBoardView *paintBoardView = [[self alloc] init];
  	    
  	//    CGRect tmpFrame = frame;
  	//    tmpFrame.size.height = frame.size.height + 44;
  	    
  	    paintBoardView.frame = frame;
  	    paintBoardView.paintLineWidth = (lineWidth > 30 ? 30 : lineWidth) ? : 1;
  	    paintBoardView.paintLineColor = lineColor ? : [UIColor blackColor];
  	    paintBoardView.paintBoardColor = boardColor ? : [UIColor whiteColor];
  	    paintBoardView.resultBlock = result;
  	    
  	    return paintBoardView;
  	}
  	
  	/// 创建简单画板视图控件
  	+ (instancetype)q_paintBoardViewWithFrame:(CGRect)frame {
  	    
  	    QPaintBoardView *paintBoardView = [[self alloc] initWithFrame:frame];
  	    
  	    paintBoardView.paintLineWidth = 1;
  	    paintBoardView.paintLineColor = [UIColor blackColor];
  	    paintBoardView.paintBoardColor = [UIColor whiteColor];
  	    
  	    return paintBoardView;
  	}
  	
  	#pragma mark - 自定义画板
  	
  	/// 初始化，自定义画板界面
  	- (instancetype)init {
  	    
  	    if (self = [super init]) {
  	        
  	        self.clipsToBounds = YES;
  	        
  	        // 添加工具按钮视图
  	        
  	        self.toolView = [[UIView alloc] init];
  	        self.toolView.backgroundColor = [UIColor blackColor];
  	        [self addSubview:self.toolView];
  	        
  	        NSArray *imageNames = @[@"btn_brush", @"btn_board", @"btn_eraser", @"btn_back", @"btn_clear", @"btn_save"];
  	        NSArray *selectedImageNames = @[@"btn_brush_pressed", @"btn_board_pressed", @"btn_eraser_pressed"];
  	        
  	        for (NSUInteger i = 0; i < 6; i++) {
  	            
  	            UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
  	            button.tag = i;
  	            [button setBackgroundImage:[self q_getBundleImageWithName:imageNames[i]] forState:UIControlStateNormal];
  	            [button addTarget:self action:@selector(toolButtonClick:) forControlEvents:UIControlEventTouchUpInside];
  	            [self.toolView addSubview:button];
  	            
  	            if (i < 3) {
  	                [button setBackgroundImage:[self q_getBundleImageWithName:selectedImageNames[i]] forState:UIControlStateSelected];
  	            }
  	        }
  	        
  	        // 添加画笔设置视图
  	        
  	        self.brushSetingView = [[UIView alloc] init];
  	        self.brushSetingView.backgroundColor = [UIColor grayColor];
  	        [self addSubview:self.brushSetingView];
  	        [self sendSubviewToBack:self.brushSetingView];
  	        
  	        UIView *widthBackView = [[UIView alloc] init];
  	        widthBackView.layer.borderWidth = 1;
  	        widthBackView.layer.borderColor = [UIColor lightGrayColor].CGColor;
  	        UIView *widthView = [[UIView alloc] init];
  	        [widthBackView addSubview:widthView];
  	        [self.brushSetingView addSubview:widthBackView];
  	        
  	        UISlider *widthSlider = [[UISlider alloc] init];
  	        widthSlider.thumbTintColor = [UIColor orangeColor];
  	        [widthSlider addTarget:self action:@selector(widthSliderClick:) forControlEvents:UIControlEventValueChanged];
  	        [self.brushSetingView addSubview:widthSlider];
  	        
  	        UIButton *colorSelectedBtn = [[UIButton alloc] init];
  	        colorSelectedBtn.layer.borderWidth = 1;
  	        colorSelectedBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;
  	        [colorSelectedBtn addTarget:self action:@selector(colorSelectedBtnClick:) forControlEvents:UIControlEventTouchUpInside];
  	        [self.brushSetingView addSubview:colorSelectedBtn];
  	        
  	        // 添加画笔颜色选择视图
  	        
  	        self.colorSelectedView = [[UIScrollView alloc] init];
  	        self.colorSelectedView.backgroundColor = [[UIColor grayColor] colorWithAlphaComponent:0.3];
  	        self.colorSelectedView.showsHorizontalScrollIndicator = NO;
  	        [self addSubview:self.colorSelectedView];
  	        [self sendSubviewToBack:self.colorSelectedView];
  	        
  	        NSArray *colorArray = @[[UIColor blackColor], [UIColor whiteColor], [UIColor redColor],
  	                                [UIColor greenColor], [UIColor blueColor], [UIColor cyanColor],
  	                                [UIColor magentaColor], [UIColor orangeColor], [UIColor yellowColor],
  	                                [UIColor darkGrayColor], [UIColor lightGrayColor], [UIColor brownColor],
  	                                [UIColor grayColor], [UIColor purpleColor]];
  	        
  	        for (NSUInteger i = 0; i < 14; i++) {
  	            UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
  	            button.layer.borderWidth = 1;
  	            button.layer.borderColor = [UIColor lightGrayColor].CGColor;
  	            [button setBackgroundColor:colorArray[i]];
  	            [button addTarget:self action:@selector(colorSelectedClick:) forControlEvents:UIControlEventTouchUpInside];
  	            [self.colorSelectedView addSubview:button];
  	        }
  	        
  	        // 添加画板设置视图
  	        
  	        self.boardSetingView = [[UIScrollView alloc] init];
  	        self.boardSetingView.backgroundColor = [UIColor grayColor];
  	        self.boardSetingView.showsHorizontalScrollIndicator = NO;
  	        [self addSubview:self.boardSetingView];
  	        [self sendSubviewToBack:self.boardSetingView];
  	        
  	        for (NSUInteger i = 0; i < 14; i++) {
  	            UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
  	            button.layer.borderWidth = 1;
  	            button.layer.borderColor = [UIColor lightGrayColor].CGColor;
  	            [button setBackgroundColor:colorArray[i]];
  	            [button addTarget:self action:@selector(boardColorSelectedClick:) forControlEvents:UIControlEventTouchUpInside];
  	            [self.boardSetingView addSubview:button];
  	        }
  	    }
  	    return self;
  	}
  	
  	/// 布局子控件
  	- (void)layoutSubviews {
  	    [super layoutSubviews];
  	    
  	    if (self.subviews.count) {
  	        
  	        // 设置工具按钮视图
  	        
  	        self.toolView.frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 44);
  	        
  	        for (NSUInteger i = 0; i < 6; i++) {
  	            CGFloat margin = (self.bounds.size.width - 44 * 6) / 7;
  	            CGFloat x = margin + (margin + 44) * i;
  	            self.toolView.subviews[i].frame = CGRectMake(x, 0, 44, 44);
  	        }
  	        
  	        // 设置画笔设置视图
  	        
  	        self.brushSetingView.frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);
  	        
  	        self.brushSetingView.subviews[0].frame = CGRectMake(15, 15, 30, 30);
  	        self.brushSetingView.subviews[0].layer.cornerRadius = 15;
  	        self.brushSetingView.subviews[0].layer.masksToBounds = YES;
  	        
  	        CGFloat w = self.paintLineWidth;
  	        self.brushSetingView.subviews[0].subviews[0].frame = CGRectMake(15 - w / 2, 15 - w / 2, w, w);
  	        self.brushSetingView.subviews[0].subviews[0].layer.cornerRadius = w / 2;
  	        self.brushSetingView.subviews[0].subviews[0].layer.masksToBounds = YES;
  	        self.brushSetingView.subviews[0].subviews[0].backgroundColor = self.paintLineColor;
  	        
  	        self.brushSetingView.subviews[1].frame = CGRectMake(60, 15, self.bounds.size.width - 60 - 80, 32);
  	        UISlider *slider = self.brushSetingView.subviews[1];
  	        slider.value = self.paintLineWidth / 30;
  	        
  	        self.brushSetingView.subviews[2].frame = CGRectMake(self.bounds.size.width - 60, 15, 50, 30);
  	        self.brushSetingView.subviews[2].backgroundColor = self.paintLineColor;
  	        
  	        // 设置画笔颜色选择视图
  	        
  	        self.colorSelectedView.frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);
  	        self.colorSelectedView.contentSize = CGSizeMake(14 * (50 + 20) + 20, 50);
  	        
  	        for (NSUInteger i = 0; i < 14; i++) {
  	            CGFloat x = 20 + (20 + 50) * i;
  	            self.colorSelectedView.subviews[i].frame = CGRectMake(x, 10, 50, 40);
  	        }
  	        
  	        // 设置画板设置视图
  	        
  	        self.boardSetingView.frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);
  	        self.boardSetingView.contentSize = CGSizeMake(14 * (50 + 20) + 20, 50);
  	        
  	        for (NSUInteger i = 0; i < 14; i++) {
  	            CGFloat x = 20 + (20 + 50) * i;
  	            self.boardSetingView.subviews[i].frame = CGRectMake(x, 10, 50, 40);
  	        }
  	    }
  	}
  	
  	/// 工具按钮点击事件处理
  	- (void)toolButtonClick:(UIButton *)btn {
  	    
  	    switch (btn.tag) {
  	            
  	        case 0: {
  	            // 画笔设置
  	            
  	            [self exitEraseState];
  	            
  	            if (btn.isSelected == NO) {
  	                
  	                [self hideBoardSetingView];
  	                
  	                [self showColorSelectedView];
  	                [self showBrushSetingView];
  	                
  	            } else {
  	                
  	                [self hideColorSelectedView];
  	                [self hideBrushSetingView];
  	            }
  	            break;
  	        }
  	            
  	        case 1: {
  	            // 画板设置
  	            
  	            [self exitEraseState];
  	            
  	            if (btn.isSelected == NO) {
  	                
  	                [self hideColorSelectedView];
  	                [self hideBrushSetingView];
  	                
  	                [self showBoardSetingView];
  	                
  	            } else {
  	                
  	                [self hideBoardSetingView];
  	            }
  	            break;
  	        }
  	            
  	        case 2: {
  	            // 擦除
  	            
  	            [self hideBoardSetingView];
  	            
  	            [self hideColorSelectedView];
  	            [self hideBrushSetingView];
  	            
  	            if (btn.selected == NO) {
  	                
  	                [self enterEraseState];
  	                
  	            } else {
  	                [self exitEraseState];
  	            }
  	            break;
  	        }
  	            
  	        case 3: {
  	            // 撤销
  	            
  	            [self hideBoardSetingView];
  	            
  	            [self hideColorSelectedView];
  	            [self hideBrushSetingView];
  	            
  	            [self q_back];
  	        
  	            break;
  	        }
  	            
  	        case 4: {
  	            // 清除
  	            
  	            [self hideBoardSetingView];
  	            
  	            [self hideColorSelectedView];
  	            [self hideBrushSetingView];
  	            
  	            [self exitEraseState];
  	            
  	            [self q_clear];
  	            
  	            break;
  	        }
  	            
  	        case 5: {
  	            // 获取绘制结果
  	            
  	            [self hideBoardSetingView];
  	            
  	            [self hideColorSelectedView];
  	            [self hideBrushSetingView];
  	            
  	            [self exitEraseState];
  	            
  	            if (self.resultBlock) {
  	                self.resultBlock([self q_getPaintImage]);
  	            }
  	            
  	            break;
  	        }
  	            
  	        default:
  	            break;
  	    }
  	}
  	
  	/// 画笔线宽设置按钮点击事件处理
  	- (void)widthSliderClick:(UISlider *)slider {
  	    
  	    if (slider.value == 0) {
  	        self.paintLineWidth = 1;
  	    } else {
  	        self.paintLineWidth = slider.value * 30;
  	    }
  	    
  	    CGFloat w = self.paintLineWidth;
  	    self.brushSetingView.subviews[0].subviews[0].frame = CGRectMake(15 - w / 2, 15 - w / 2, w, w);
  	    self.brushSetingView.subviews[0].subviews[0].layer.cornerRadius = w / 2;
  	}
  	
  	/// 画笔颜色选择按钮点击事件处理
  	- (void)colorSelectedBtnClick:(UIButton *)btn {
  	    
  	    if (btn.selected == NO) {
  	        [self showColorSelectedView];
  	    } else {
  	        [self hideColorSelectedView];
  	    }
  	}
  	
  	/// 画笔颜色选择点击响应事件处理
  	- (void)colorSelectedClick:(UIButton *)btn {
  	    
  	    self.paintLineColor = btn.backgroundColor;
  	    
  	    self.brushSetingView.subviews[0].subviews[0].backgroundColor = btn.backgroundColor;
  	    self.brushSetingView.subviews[2].backgroundColor = btn.backgroundColor;
  	}
  	
  	/// 画板颜色选择点击响应事件处理
  	- (void)boardColorSelectedClick:(UIButton *)btn {
  	    
  	    self.paintBoardColor = btn.backgroundColor;
  	}
  	
  	/// 显示画笔设置视图
  	- (void)showBrushSetingView {
  	    
  	    UIButton *setBrushBtn = self.toolView.subviews[0];
  	    
  	    if (setBrushBtn.selected == NO) {
  	        
  	        setBrushBtn.selected = YES;
  	        
  	        [UIView animateWithDuration:0.2 animations:^{
  	            CGRect frame = CGRectMake(0, self.bounds.size.height - 44 - 60, self.bounds.size.width, 60);
  	            self.brushSetingView.frame = frame;
  	        }];
  	    }
  	}
  	
  	/// 隐藏画笔设置视图
  	- (void)hideBrushSetingView {
  	    
  	    UIButton *setBrushBtn = self.toolView.subviews[0];
  	    
  	    if (setBrushBtn.selected) {
  	        
  	        setBrushBtn.selected = NO;
  	        
  	        [UIView animateWithDuration:0.2 animations:^{
  	            CGRect frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);
  	            self.brushSetingView.frame = frame;
  	        }];
  	    }
  	}
  	
  	// 显示画笔颜色选择视图
  	- (void)showColorSelectedView {
  	    
  	    UIButton *colorSelectedBtn = self.brushSetingView.subviews[2];
  	    
  	    if (colorSelectedBtn.selected == NO) {
  	        
  	        colorSelectedBtn.selected = YES;
  	        
  	        [UIView animateWithDuration:0.2 animations:^{
  	            CGRect frame = CGRectMake(0, self.bounds.size.height - 44 - 60 - 60, self.bounds.size.width, 60);
  	            self.colorSelectedView.frame = frame;
  	        }];
  	    }
  	}
  	
  	/// 隐藏画笔颜色选择视图
  	- (void)hideColorSelectedView {
  	    
  	    UIButton *colorSelectedBtn = self.brushSetingView.subviews[2];
  	    
  	    if (colorSelectedBtn.selected) {
  	        
  	        colorSelectedBtn.selected = NO;
  	        
  	        [UIView animateWithDuration:0.2 animations:^{
  	            CGRect frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);
  	            self.colorSelectedView.frame = frame;
  	        }];
  	    }
  	}
  	
  	/// 显示画板设置视图
  	- (void)showBoardSetingView {
  	    
  	    UIButton *setBoardBtn = self.toolView.subviews[1];
  	    
  	    if (setBoardBtn.selected == NO) {
  	        
  	        setBoardBtn.selected = YES;
  	        
  	        [UIView animateWithDuration:0.2 animations:^{
  	            CGRect frame = CGRectMake(0, self.bounds.size.height - 44 - 60, self.bounds.size.width, 60);
  	            self.boardSetingView.frame = frame;
  	        }];
  	    }
  	}
  	
  	/// 隐藏画板设置视图
  	- (void)hideBoardSetingView {
  	    
  	    UIButton *setBoardBtn = self.toolView.subviews[1];
  	    
  	    if (setBoardBtn.selected) {
  	        
  	        setBoardBtn.selected = NO;
  	        
  	        [UIView animateWithDuration:0.2 animations:^{
  	            CGRect frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);
  	            self.boardSetingView.frame = frame;
  	        }];
  	    }
  	}
  	
  	/// 进入擦除状态
  	- (void)enterEraseState {
  	    
  	    UIButton *setEraseBtn = self.toolView.subviews[2];
  	    
  	    if (setEraseBtn.selected == NO) {
  	        
  	        setEraseBtn.selected = YES;
  	        
  	        self.lastPaintLineColor = self.paintLineColor;
  	        self.paintLineColor = self.paintBoardColor;
  	        
  	        self.lastPaintLineWidth = self.paintLineWidth;
  	        self.paintLineWidth = self.paintLineWidth + 5;
  	    }
  	}
  	
  	/// 退出擦除状态
  	- (void)exitEraseState {
  	    
  	    UIButton *setEraseBtn = self.toolView.subviews[2];
  	    
  	    if (setEraseBtn.isSelected) {
  	        
  	        setEraseBtn.selected = NO;
  	        
  	        self.paintLineColor = self.lastPaintLineColor;
  	        self.paintLineWidth = self.lastPaintLineWidth;
  	    }
  	}
  	
  	#pragma mark - 绘制图案
  	
  	/// 触摸开始
  	- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {
  	    
  	    if (self.subviews.count) {
  	        
  	        [self hideColorSelectedView];
  	        [self hideBrushSetingView];
  	        [self hideBoardSetingView];
  	    }
  	    
  	    // 获取触摸起始点位置
  	    CGPoint startPoint = [touches.anyObject locationInView:self];
  	    
  	    // 添加路径描绘起始点
  	    [self.path moveToPoint:startPoint];
  	    
  	    // 记录线的属性
  	    self.path.pathColor = self.paintLineColor;
  	    self.path.pathWidth = self.paintLineWidth;
  	    
  	    // 添加一条触摸路径描绘
  	    [self.pathsArrayM addObject:self.path];
  	}
  	
  	/// 触摸移动
  	- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {
  	    
  	    // 获取触摸点位置
  	    CGPoint touchPoint = [touches.anyObject locationInView:self];
  	    
  	    // 添加路径描绘
  	    [self.path addLineToPoint:touchPoint];
  	    
  	    // 刷新视图
  	    [self setNeedsDisplay];
  	}
  	
  	/// 触摸结束
  	- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {
  	    
  	    // 销毁 path
  	    self.path = nil;
  	}
  	
  	/// 触摸取消
  	- (void)touchesCancelled:(NSSet *)touches withEvent:(nullable UIEvent *)event {
  	    [self touchesEnded:touches withEvent:event];
  	}
  	
  	/// 绘制图形，只要调用 drawRect 方法就会把之前的内容全部清空
  	- (void)drawRect:(CGRect)rect {
  	    
  	    for (QPaintBoardPath *path in self.pathsArrayM) {
  	        
  	        // 绘制路径
  	        path.lineWidth = path.pathWidth;
  	        [path.pathColor setStroke];
  	        
  	        path.lineCapStyle = kCGLineCapRound;
  	        path.lineJoinStyle = kCGLineJoinRound;
  	        [path stroke];
  	    }
  	}
  	
  	/// 获取绘画结果
  	- (UIImage * _Nullable)q_getPaintImage {
  	    
  	    UIImage *image = nil;
  	    
  	    CGSize boardSize = self.bounds.size;
  	    
  	    if (self.subviews.count) {
  	        boardSize.height = self.bounds.size.height - 44;
  	    }
  	    
  	    if (self.pathsArrayM.count) {
  	        UIGraphicsBeginImageContextWithOptions(boardSize, NO, 0);
  	        CGContextRef ctx = UIGraphicsGetCurrentContext();
  	        [self.layer renderInContext:ctx];
  	        image = UIGraphicsGetImageFromCurrentImageContext();
  	        UIGraphicsEndImageContext();
  	    }
  	    
  	    return image;
  	}
  	
  	/// 清除绘画结果
  	- (void)q_clear {
  	    
  	    if (self.pathsArrayM.count) {
  	        [self.pathsArrayM removeAllObjects];
  	        
  	        [self setNeedsDisplay];
  	    }
  	}
  	
  	/// 撤销绘画结果
  	- (void)q_back {
  	    
  	    if (self.pathsArrayM.count) {
  	        [self.pathsArrayM removeLastObject];
  	        
  	        [self setNeedsDisplay];
  	    }
  	}
  	
  	/// 懒加载
  	
  	- (QPaintBoardPath * _Nullable)path {
  	    
  	    // path 每次绘制完成后需要销毁，否则无法清除之前绘制的路径
  	    
  	    if (_path == nil) {
  	        _path = [QPaintBoardPath bezierPath];
  	    }
  	    return _path;
  	}
  	
  	- (NSMutableArray *)pathsArrayM {
  	    
  	    if (_pathsArrayM == nil) {
  	        _pathsArrayM = [NSMutableArray array];
  	    }
  	    return _pathsArrayM;
  	}
  	
  	/// 设置属性值
  	- (void)setPaintBoardColor:(UIColor *)paintBoardColor {
  	    _paintBoardColor = paintBoardColor;
  	    self.backgroundColor = paintBoardColor;
  	}
  	
  	/// 加载 bundle 中的图片
  	- (UIImage *)q_getBundleImageWithName:(NSString *)name {
  	    
  	    NSString *bundlePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"QPaintBoardView.bundle"];
  	    
  	    UIImage *image = [[UIImage imageWithContentsOfFile:[bundlePath stringByAppendingPathComponent:name]]
  	                      imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
  	    return image;
  	}
  	
  	@end
  

• 1、创建简单画板

  	// 创建简单画板
  	CGRect frame = CGRectMake(20, 50, self.view.bounds.size.width - 40, 200);
  	    
  	QPaintBoardView *paintBoardView = [QPaintBoardView q_paintBoardViewWithFrame:frame];
  	    
  	// 可选属性值设置
  	paintBoardView.paintLineWidth = 5;                         // default is 1
  	paintBoardView.paintLineColor = [UIColor redColor];        // default is blackColor
  	paintBoardView.paintBoardColor = [UIColor cyanColor];      // default is whiteColor
  	
  	[self.view addSubview:paintBoardView];
  	self.paintBoardView = paintBoardView;
  	
  	// 撤销绘画结果
  	[self.paintBoardView q_back];
  	    
  	// 清除绘画结果
  	[self.paintBoardView q_clear];
  	    
  	// 获取绘画结果
  	UIImage *image = [self.paintBoardView q_getPaintImage];
  

  • 效果

    

• 2、创建画板

  	// 创建画板
  	QPaintBoardView *paintBoard = [QPaintBoardView q_paintBoardViewWithFrame:self.view.bounds
  	                                                               lineWidth:0
  	                                                               lineColor:nil
  	                                                              boardColor:nil
  	                                                             paintResult:^(UIImage * _Nullable image) {
  	                                                                 
  	    if (image) {
  	        NSData *data = UIImagePNGRepresentation(image);
  	        [data writeToFile:@"/Users/JHQ0228/Desktop/Images/pic.png" atomically:YES];
  	    }
  	}];
  	    
  	[self.view addSubview:paintBoard];
  

  • 效果