画板例子实现

画板例子思路

步骤一：自定义一个画板视图
步骤二：监听手指触摸事件，当手指在视图滑动的时候，就画线 .
2.1 在手指开始触摸的时候，创建可变路径，并且设置路径起始点。
- ( void )touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView: self ];
    SUNBezierPath *path = [SUNBezierPath bezierPathWithWidth:_width andWithColor:_color andWithPoint:point];
    _pathU = path;
    [ self .arrayM addObject:path];
   
}

2.2 . 当手指移动的时候，给路径添加目标点，并且重新绘制视图。
- ( void )touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView: self ];
    [_pathU addLineToPoint:point];
    // 重绘
     [ self  setNeedsDisplay];
}

2.3  当手指触摸结束，将路径保存起来，并释放当前路径
- ( void )touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [_pathM addObject:_pathU];
    CGPathRelease(_pathU.CGPath);
    NSLog( @"%s" ,__func__);
}
注意：

1. [self setNeedsDisplay];这段代码不能少，否则在画板画不出东西。

2.当画板与slider绑定时，要通过 awakeFromNib设置线宽，不然线宽默认为0.

- ( void )awakeFromNib
{
    _width = 2 ;
}
步骤三：实现绘制视图方法
3.1.   自定义路径类
+ ( instancetype )bezierPathWithWidth:(CGFloat)width andWithColor:(UIColor *)color andWithPoint:(CGPoint)point
{
    SUNBezierPath *path = [[SUNBezierPath alloc] init];
    path.lineWidth = width;
    path.color = color;
    [path moveToPoint:point];
    return path;
}

3.2. 实现绘图方法
- ( void )drawRect:(CGRect)rect
{
    for (SUNBezierPath *path in self .arrayM) {
        if ([path isKindOfClass:[UIImage class]])  {
            UIImage *image = (UIImage *)path;
            [image drawAtPoint:CGPointZero];
        } else {
            [path.color set];
            [path stroke];
        }
    }

步骤四、在storyboard中定义工具栏

4.1 清屏

- ( void )clearScreen
{
    [ self . arrayM removeAllObjects ];
    [ self setNeedsDisplay ];
}

直接把数组 removeAllObjects

4.2 撤销

- ( void )undo
{
    [ self . arrayM removeLastObject ];
    [ self setNeedsDisplay ];
}

4.3 保存

- ( IBAction )save:( id )sender
{
    // 截屏
    // 开启上下文
    UIGraphicsBeginImageContextWithOptions ( _drawingView . bounds . size , NO , 0.0 );
   
    // 获得当前上下文
    CGContextRef ctr = UIGraphicsGetCurrentContext ();
    // 把画板上的内容渲染都上下文
    [ _drawingView . layer renderInContext :ctr];
   
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext ();
   
    // 关闭上下文
    UIGraphicsEndImageContext ();
   
    // 保存到相册里面
    UIImageWriteToSavedPhotosAlbum (newImage, self , @selector (image:didFinishSavingWithError:contextInfo:), nil );
}

调用 MBProgressHUD  第三方框架

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

4.4 照片

- ( IBAction )selectedPicture:( id )sender
{
    // 去用户的操作
    UIImagePickerController *picker = [[ UIImagePickerController alloc ] init ];
   
    picker. sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum ;
    [ self presentViewController :picker animated : YES completion : nil ];
    picker. delegate = self ;

}

- ( void )imagePickerController:( UIImagePickerController *)picker didFinishPickingMediaWithInfo:( NSDictionary *)info
{
    NSLog ( @"%@" ,info);
    UIImage *newImage = info[ UIImagePickerControllerOriginalImage ];
    SUNHandleView *handleV = [[ SUNHandleView alloc ] initWithFrame : self . drawingView . frame ];
    handleV. delegate = self ;
    handleV. image = newImage;
    [ self . view addSubview :handleV];
    [ self dismissViewControllerAnimated : YES completion : nil ];

}

注意：去模拟器用户的相册要遵守UIImagePickerControllerDelegate协议，实现

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info

以modal的形式

[self presentViewController:picker animated:YES completion:nil];

关闭当初Modal出来的控制器

[self dismissViewControllerAnimated:YES completion:nil];

步骤五、实现从相处里面选择一张图片能够用手势操作。

添加手势
- ( void )addGestureRecognizer
{
    UIPanGestureRecognizer *pan = [[ UIPanGestureRecognizer alloc ] initWithTarget : self action : @selector (pan:)];
    pan. delegate = self ;
    [ _imageView addGestureRecognizer :pan];
   
    UIRotationGestureRecognizer *rotation = [[ UIRotationGestureRecognizer alloc ] initWithTarget : self action : @selector (rotation:)];
    rotation. delegate = self ;
    [ _imageView addGestureRecognizer :rotation];
   
    UIPinchGestureRecognizer *pinch = [[ UIPinchGestureRecognizer alloc ] initWithTarget : self action : @selector (pinch:)];
    pinch. delegate = self ;
    [ _imageView addGestureRecognizer :pinch];
   
    UILongPressGestureRecognizer *longPress = [[ UILongPressGestureRecognizer alloc ] initWithTarget : self action : @selector (longPress:)];
    longPress. delegate = self ;
    [ _imageView addGestureRecognizer :longPress];
}

- ( void )pan:( UIPanGestureRecognizer *)pan
{
    CGPoint point = [pan translationInView : self ];
    _imageView . transform = CGAffineTransformTranslate ( _imageView . transform , point. x , point. y );
    [pan setTranslation : CGPointZero inView : _imageView ];
}

- ( void )rotation:( UIRotationGestureRecognizer *)rotation
{
    _imageView . transform = CGAffineTransformRotate ( _imageView . transform , rotation. rotation );
    rotation. rotation = 0 ;
}

- ( void )pinch:( UIPinchGestureRecognizer *)pinch
{
    _imageView . transform = CGAffineTransformScale ( _imageView . transform , pinch. scale , pinch. scale );
    pinch. scale = 1 ;
}

实现长按的操作
- ( void )longPress:( UILongPressGestureRecognizer *)longPress
{
    if (longPress. state == UIGestureRecognizerStateEnded ) {
        [ UIView animateWithDuration : 0.5 animations :^{
            _imageView . alpha = 0.3 ;
        } completion :^( BOOL finished) {
            [ UIView animateWithDuration : 0.5 animations :^{
                _imageView . alpha = 1 ;
            } completion :^( BOOL finished) {
                // 截屏
                UIGraphicsBeginImageContextWithOptions ( self . bounds . size , NO , 0.0 );
                CGContextRef ctr = UIGraphicsGetCurrentContext ();
                [ self . layer renderInContext :ctr];
                UIImage *image = UIGraphicsGetImageFromCurrentImageContext ();
                NSData *data = UIImagePNGRepresentation (image);
                [data writeToFile : @"/Users/sunjinshuai/Desktop/image.png" atomically : YES ];
                UIGraphicsEndImageContext ();
                UIImageWriteToSavedPhotosAlbum (image, self , @selector (image:didFinishSavingWithError:contextInfo:), nil );
                // 把图片传给控制器
                if ([ self . delegate respondsToSelector : @selector (handleView:withImage:)]) {
                    [ self . delegate handleView : self withImage :image];
                }
                // 从父控件中移除
                [ self removeFromSuperview ];
            }];
        }];
       
    }
}

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

- ( BOOL )gestureRecognizer:( UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:( UIGestureRecognizer *)otherGestureRecognizer
{
    return YES ;
}

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

- ( void )addImageView
{
    UIImageView *imageV = [[ UIImageView alloc ] initWithFrame : self . bounds ];
    imageV. userInteractionEnabled = YES ;
    _imageView = imageV;
    [ self addSubview :imageV];
}