IOS 绘制画画板（封装上下文）

封装上下文

UIImage (CaptureView).h / .m

@interface UIImage (CaptureView)

+ (UIImage *)captureImageWithView:(UIView *)view;
@end

#import "UIImage+captureView.h"

@implementation UIImage (CaptureView)

+ (UIImage *)captureImageWithView:(UIView *)view
{
    // 1.创建bitmap上下文
    UIGraphicsBeginImageContext(view.frame.size);
    // 2.将要保存的view的layer绘制到bitmap上下文中
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    // 3.取出绘制号的图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    return newImage;
}


@end

画画板

NJView.h / .m

@interface NJView : UIView

- (void)clearView;
- (void)backView;
@end

#import "NJView.h"

@interface NJView ()

@property (nonatomic, strong) NSMutableArray *paths;

@end

@implementation NJView

- (NSMutableArray *)paths
{
    if (_paths == nil) {
        _paths = [NSMutableArray array];
    }
    return _paths;
}

// 开始触摸
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    // 1.获取手指对应UITouch对象
    UITouch *touch = [touches anyObject];
    // 2.通过UITouch对象获取手指触摸的位置
    CGPoint startPoint = [touch locationInView:touch.view];
    
    // 3.当用户手指按下的时候创建一条路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    // 3.1设置路径的相关属性
    [path setLineJoinStyle:kCGLineJoinRound];
    [path setLineCapStyle:kCGLineCapRound];
    [path setLineWidth:10];

    
    // 4.设置当前路径的起点
    [path moveToPoint:startPoint];
    // 5.将路径添加到数组中
    [self.paths addObject:path];
    
}
// 移动
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 1.获取手指对应UITouch对象
    UITouch *touch = [touches anyObject];
    // 2.通过UITouch对象获取手指触摸的位置
    CGPoint movePoint = [touch locationInView:touch.view];
    
    // 3.取出当前的path
    UIBezierPath *currentPaht = [self.paths lastObject];
    // 4.设置当前路径的终点
    [currentPaht addLineToPoint:movePoint];
    
    // 6.调用drawRect方法重回视图
    [self setNeedsDisplay];

}

// 离开view(停止触摸)
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    
    [self touchesMoved:touches withEvent:event];
    /*
    // 1.获取手指对应UITouch对象
    UITouch *touch = [touches anyObject];
    // 2.通过UITouch对象获取手指触摸的位置
    CGPoint endPoint = [touch locationInView:touch.view];
    
    // 3.取出当前的path
    UIBezierPath *currentPaht = [self.paths lastObject];
    // 4.设置当前路径的终点
    [currentPaht addLineToPoint:endPoint];

    // 6.调用drawRect方法重回视图
    [self setNeedsDisplay];
     */
     

}

// 画线
- (void)drawRect:(CGRect)rect
{
    
    [[UIColor redColor] set];
    // 边路数组绘制所有的线段
    for (UIBezierPath *path in self.paths) {
        [path stroke];
    }
    
}

- (void)test
{
    /*
     // 1.创建一条路径
     CGMutablePathRef path = CGPathCreateMutable();
     CGPathMoveToPoint(path, NULL, 20, 20);
     CGPathAddLineToPoint(path, NULL, 100, 100);
     
     CGMutablePathRef path2 = CGPathCreateMutable();
     CGPathMoveToPoint(path2, NULL, 120, 120);
     CGPathAddLineToPoint(path2, NULL, 200, 200);
     
     
     CGContextRef ctx = UIGraphicsGetCurrentContext();
     // 2.将路径添加到上下文中
     CGContextAddPath(ctx, path);
     CGContextAddPath(ctx, path2);
     
     // 3.渲染
     CGContextStrokePath(ctx);
     */
    
    /*
     //    UIBezierPath == CGMutablePathRef
     
     // 1.创建一条路径
     UIBezierPath *path = [UIBezierPath bezierPath];
     // 2.给路径设置起点和重点
     [path moveToPoint:CGPointMake(20, 20)];
     [path addLineToPoint:CGPointMake(100, 100)];
     
     [path setLineCapStyle:kCGLineCapRound];
     [path setLineWidth:10];
     [path setLineJoinStyle:kCGLineJoinRound];
     
     // 3.渲染路径
     [path stroke];
     
     // 1.创建一条路径
     UIBezierPath *path2 = [UIBezierPath bezierPath];
     // 2.给路径设置起点和重点
     [path2 moveToPoint:CGPointMake(120, 120)];
     [path2 addLineToPoint:CGPointMake(200, 200)];
     
     [path2 stroke];
     */
}

- (void)clearView
{
    [self.paths removeAllObjects];
    [self setNeedsDisplay];
}
- (void)backView
{
    [self.paths removeLastObject];
    [self setNeedsDisplay];
}

调用画画板到控制器

@interface NJViewController ()
/**
 *  清屏
 */
- (IBAction)clearBtnClick;
/**
 *  回退
 */
- (IBAction)backBtnClick;
/**
 *  保存
 */
- (IBAction)saveBtnClick;

@property (weak, nonatomic) IBOutlet NJView *customView;
@end

@implementation NJViewController
- (IBAction)clearBtnClick {
    [self.customView clearView];
}

- (IBAction)backBtnClick {
    
    [self.customView backView];
}

- (IBAction)saveBtnClick {
    
    UIImage *newImage = [UIImage captureImageWithView:self.customView];
    // 4.保存到相册
    UIImageWriteToSavedPhotosAlbum(newImage, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
}

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
    if (error) {
        [MBProgressHUD showError:@"保存失败"];
    }else
    {
        [MBProgressHUD showSuccess:@"保存成功"];
    }
}
@end