iOS 签名画板

一. 封装画图板

画板就是继承于UiView的一个子类，我们可以在这个子类中添加我们画图板相应的属性和方法，然后实例化成对象添加到ViewController中。

• 封装白板的第一步是新建一个UIView的子类HQDrawingView,然后添加相应的属性和方法。HQDrawingView.h中的代码如下，代码具体意思请参照注释:

#import <UIKit/UIKit.h>

typedef void(^SaveSuccessBlock)();

@interface HQDrawingView : UIView

// 用来设置线条的颜色
@property (nonatomic, strong) UIColor *color;
// 用来设置线条的宽度
@property (nonatomic, assign) CGFloat lineWidth;
// 用来记录已有线条
@property (nonatomic, strong) NSMutableArray *allLines;

// 初始化相关参数
- (void)initDrawingView;
// back操作
- (void)doBack;
// Forward操作
- (void)doForward;
// 保存Image
- (void)saveImage:(SaveSuccessBlock)saveSuccessBlock;


@end

• 上面的代码是对外的接口，有些属性我们是写在HQDrawingView.m的延展中以实现私有的目的，HQDrawingView延展部分如下：

@interface HQDrawingView()

// 声明一条贝塞尔曲线
@property(nonatomic, strong) UIBezierPath *bezier;
// 创建一个存储后退操作记录的数组
@property(nonatomic, strong) NSMutableArray *cancleArr;

@end

• 下面是实现部分的代码

初始化我们的白板，给线条指定默认颜色和宽度并且给相应的变量分配内存空间，初始化代码如下：

// 初始化一些参数
- (void)initDrawingView {
    
    self.color = [UIColor blackColor];
    self.lineWidth = 1;
    self.allLines = [NSMutableArray new];
    self.cancleArr = [NSMutableArray new];
}

后退功能的封装，相当于两个栈，把显示的线条出栈，进入为不显示的线条栈中，每执行一次此操作显示线条栈中的元素会少一条而不显示线条栈中会多一条，代码如下：

- (void)doBack {
    
    if (self.allLines.count > 0) {
        NSInteger index = self.allLines.count - 1;
        [self.cancleArr addObject:self.allLines[index]];
        [self.allLines removeObjectAtIndex:index];
        [self setNeedsDisplay];
    }
}

前进功能与之相反,从未显示栈中取出元素放入显示的栈中，代码中的栈我们是用数组来表示的，代码如下：

- (void)doForward {
    
    if (self.cancleArr.count > 0) {
        NSInteger index = self.cancleArr.count - 1;
        [self.allLines addObject:self.cancleArr[index]];
        [self.cancleArr removeObjectAtIndex:index];
        [self setNeedsDisplay];
    }
}

当开始触摸时我们新建一个BezierPath,把触摸起点设置成BezierPath的起点，并把将要画出的线条以及线条对应的属性封装成字典添加到显示栈中，代码如下:

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    // 贝塞尔曲线
    self.bezier = [UIBezierPath bezierPath];
    
    // 获取触摸的点
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    
    // 设置贝塞尔起点
    [self.bezier moveToPoint:point];
    
    // 在字典保存每条线的数据
    NSMutableDictionary *tempDic = [NSMutableDictionary new];
    [tempDic setObject:self.color forKey:@"color"];
    [tempDic setObject:[NSNumber numberWithFloat:self.lineWidth] forKey:@"lineWidth"];
    [tempDic setObject:self.bezier forKey:@"line"];
    
    // 存入线
    [self.allLines addObject:tempDic];
}

当划线的时候把点存储到BezierPath中，代码如下:

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    
    [self.bezier addLineToPoint:point];
    //重绘界面
    [self setNeedsDisplay];
}

画出线条

- (void)drawRect:(CGRect)rect {
    
    for (int i = 0; i < self.allLines.count; i++) {
        
        NSDictionary *temDic = self.allLines[i];
        UIColor *color = temDic[@"color"];
        CGFloat width = [temDic[@"lineWidth"] floatValue];
        UIBezierPath *path = temDic[@"line"];
        
        [color setStroke];
        [path setLineWidth:width];
        [path stroke];
    }
}

保存图片进入相册的代码:

- (void)saveImage:(SaveSuccessBlock)saveSuccessBlock {
    // 截屏
    UIGraphicsBeginImageContext(self.bounds.size);
    [self.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    // 截取画板尺寸
    CGImageRef sourceImageRef = [image CGImage];
    CGImageRef newImageRef = CGImageCreateWithImageInRect(sourceImageRef, CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height));
    UIImage *newImage = [UIImage imageWithCGImage:newImageRef];
    
    // 截图保存相册
    UIImageWriteToSavedPhotosAlbum(newImage, nil, nil, nil);
    
    if (saveSuccessBlock) {
        saveSuccessBlock();
    }
}

二.画图板的使用

下面给出了主要控件的回调方法

• 通过Slider来调节线条的宽度

- (IBAction)widthSlider:(UISlider *)sender {
    
    self.HQDrawView.lineWidth = self.widthSlide.value;
}

• 通过SegmentControl来设置线条的颜色

- (IBAction)colorSegment:(UISegmentedControl *)sender {
    
    switch (self.colorSegment.selectedSegmentIndex) {
        case 0:
            self.HQDrawView.color = [UIColor blackColor];
            break;
        case 1:
            self.HQDrawView.color = [UIColor redColor];
            break;
        case 2:
            self.HQDrawView.color = [UIColor greenColor];
            break;
        default:
            break;
    }
}

• 后退前进

- (IBAction)back:(id)sender {
    [self.HQDrawView doBack];
}


- (IBAction)forward:(id)sender {
    [self.HQDrawView doForward];
}

• 保存操作成功后弹窗提示

- (IBAction)save:(id)sender {
    
    __weak typeof(self) weakS = self;
    [self.HQDrawView saveImage:^{
        UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"保存成功"
                                                                       message:@"请在相册查看"
                                                                preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction* defaultAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault
                                                              handler:^(UIAlertAction * action) {}];
        [alert addAction:defaultAction];
        [weakS presentViewController:alert animated:YES completion:nil];
    }];
    
}

demo