iOS简单画板开发案例分享

移动开发 得得之家
这篇文章主要为大家分享了iOS实现简单画板开发案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近在学习Quartz2D，学习了一个简单画板的实现，现在把实现过程记录一下。

主要用到的点就是画线，截屏，绘制图片，选择图片，以及保存所有绘制的线。

首先在storyboard上布局好控件，设置约束等等，最后的效果是这样：

自定义画板DrawView，使用时可能是从xib中加载，也可能是手动创建，所以创建对象的方法需要实现两个：


#import <UIKit/UIKit.h>
 
@interface DrawView : UIView
/** 线宽 */
@property (nonatomic, assign) NSInteger lineWidth;
 
/** 颜色 */
@property(nonatomic, strong) UIColor *pathColor;
 
/** 图片 */
@property(nonatomic, strong) UIImage *image;
 
- (void)clear;
 
- (void)undo;


- (void)awakeFromNib {
   
  [self setUp];
   
}
 
- (instancetype)initWithFrame:(CGRect)frame {
   
  if (self == [super initWithFrame:frame]) {
    [self setUp];
  }
  return self;
}

setUp初始化方法，初始化时要做的事情就是给画板添加拖动手势，也可以将画笔路径的线宽在这里设置


//自定义初始化方法
- (void)setUp {
   
  //添加手势
  UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
  [self addGestureRecognizer:pan];
   
  //初始化时设置路径线宽
  _lineWidth = 2;
   
}

手指在画板上移动时开始绘制线条，这里因为原生的UIBezierPath类没有办法设置路径颜色，所以这里只能自定义Path类了   


#import <UIKit/UIKit.h>
 
@interface DrawPath : UIBezierPath
 
@property (nonatomic, strong) UIColor *pathColor;
 
@end

手指移动时，绘制线条，路径是自定义的Path类


@interface DrawView ()
 
@property(nonatomic, strong)DrawPath *path;
/** 保存所有路径的数组 */
@property(nonatomic, strong) NSMutableArray *pathArr;
 
@end
 
//懒加载
- (NSMutableArray *)pathArr {
  if (_pathArr == nil) {
     
    _pathArr = [NSMutableArray array];
     
  }
  return _pathArr;
}

- (void)pan:(UIPanGestureRecognizer *)pan {
   
  //获取开始的触摸点
  CGPoint startP = [pan locationInView:self];
   
  if (pan.state == UIGestureRecognizerStateBegan) {
     
    //创建贝塞尔路径
    _path = [[DrawPath alloc]init];
    _path.lineWidth = _lineWidth;
    _path.pathColor = _pathColor;
     
    //不能在手指抬起时将路径添加到数组，因为在遍历数组画线时路径还没有被添加到数组里面
    [_pathArr addObject:_path];
     
    //设置起点
    [_path moveToPoint:startP];
     
  }
   
  //连线
  [_path addLineToPoint:startP];
   
  //重绘，调用drawRect方法
  [self setNeedsDisplay];
   
}

画线实现drawRect方法，绘制线条或者图片时，是把数组中的路径全部画出来


- (void)drawRect:(CGRect)rect {
   
  //把所有路径画出来
  for (DrawPath *path in self.pathArr) {
     
    if ([path isKindOfClass:[UIImage class]]) {
      //画图
      UIImage *image = (UIImage *)path;
      [image drawInRect:rect];
    }else {
      //画线
      [path.pathColor set];
      [path stroke];
    }
  }
   
}

当把图片添加到画板时


- (void)setImage:(UIImage *)image {
   
  _image = image;
   
  [self.pathArr addObject:image];
   
  //重绘调用drawRect才能在画板上显示图片
  [self setNeedsDisplay];
}

还可以把直接更新路径数组的操作封装在画板中


- (void)clear {
  //清除
  [self.pathArr removeAllObjects];
   
  [self setNeedsDisplay];
   
}
 
- (void)undo {
  //撤销
  [self.pathArr removeLastObject];
   
  [self setNeedsDisplay];
}

控制器中：


@interface ViewController () <UIImagePickerControllerDelegate, UINavigationControllerDelegate>
@property (weak, nonatomic) IBOutlet DrawView *drawView;
@end

实现几个按钮对画板的操作：


- (IBAction)clear:(id)sender {
   
  //清屏
  [_drawView clear];
   
}
 
- (IBAction)undo:(id)sender {
   
  //撤销
  [_drawView undo];
   
}
 
- (IBAction)eraser:(id)sender {
   
  //擦除 就是把路径的颜色设置为画板的背景色，假象
  _drawView.pathColor = _drawView.backgroundColor;
  _drawView.lineWidth = 20;
   
}
 
- (IBAction)changeLineWidth:(UISlider *)sender {
   
  //改变路径线宽
  _drawView.lineWidth = sender.value;
   
}
 
- (IBAction)changeColor:(UIButton *)sender {
   
   
  //改变路径颜色
  _drawView.pathColor = sender.backgroundColor;
   
}
 
- (IBAction)pickPhoto:(id)sender {
   
  //选择照片
  //弹出系统相册
  UIImagePickerController *picker = [[UIImagePickerController alloc]init];
   
  //设置选择控制器的来源 UIImagePickerControllerSourceTypeSavedPhotosAlbum:照片库
  picker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;
   
  //设置代理
  picker.delegate = self;
   
  //modal出控制器
  [self presentViewController:picker animated:YES completion:nil];
   
}
 
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info {
   
  //获取选择的图片
  UIImage *image = info[UIImagePickerControllerOriginalImage];
   
  //创建一个处理图片的view
  ImageHandleView *handleView = [[ImageHandleView alloc]initWithFrame:self.drawView.bounds];
   
  handleView.handleCompletionBlock = ^(UIImage *image){
     
    _drawView.image = image;
  };
   
  [self.drawView addSubview:handleView];
   
  //将图片画在画板上
  handleView.image = image;
   
  //_drawView.image = image;
   
  //dismiss
  [self dismissViewControllerAnimated:YES completion:nil];
  //NSLog(@"%@", info);
   
}
 
- (IBAction)save:(id)sender {
   
  [UIView animateWithDuration:0.15 animations:^{
    //保存当前画板上的内容
     
    //开启上下文
    UIGraphicsBeginImageContextWithOptions(_drawView.bounds.size, NO, 0);
     
    //获取位图上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
     
    //把控件上的图层渲染到上下文
    [_drawView.layer renderInContext:ctx];
     
    //获取上下文中的图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
     
    //关闭上下文
    UIGraphicsEndImageContext();
     
    //保存图片到相册
    UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
     
    self.drawView.alpha = 0;
  } completion:^(BOOL finished) {
    [UIView animateWithDuration:0.15 animations:^{
      self.drawView.alpha = 1;
    }];
  }];
   
}
 
//保存成功后的方法必须是这个，不能随便写
- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {
   
  NSLog(@"保存成功");
   
}

从相册选择完图片后把图片显示在画板上了但是还没有渲染到layer，这时候需要对图片进行移动缩放旋转这些操作的话，但是UIImage是不能拉伸旋转这些操作的，UIImageView才可以，所以解决思路就是自定义一个view来专门处理对图片的操作，在自定义view上放一个UIImageView，从相册选择图片后获取的image设置给UIImageView，这样的自定义view上操作UIIamgeView。


#import <UIKit/UIKit.h>
 
@interface ImageHandleView : UIView
/** 图片 */
@property(nonatomic, strong) UIImage *image;
 
/** block */
@property(nonatomic, strong) void(^handleCompletionBlock)(UIImage *image);
@end

#import "ImageHandleView.h"
 
@interface ImageHandleView () <UIGestureRecognizerDelegate>
 
/** image */
@property(nonatomic, weak) UIImageView *imageView;
 
@end
 
@implementation ImageHandleView
 
//防止图片上的触摸事件传递到画板
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
   
  return _imageView;
}
 
- (UIImageView *)imageView {
   
  if (_imageView == nil) {
    UIImageView *imageV = [[UIImageView alloc]initWithFrame:self.bounds];
     
    _imageView = imageV;
     
    //设置imgaeview允许与用户交互
    _imageView.userInteractionEnabled = YES;
     
    //添加手势
    [self setUpGestureRecognizer];
     
    //把这个imageview添加到图片处理的view上
    [self addSubview:imageV];
     
  }
  return _imageView;
}
 
#pragma mark - 添加手势
- (void)setUpGestureRecognizer {
   
  //平移手势
  UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
  [_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:)];
  [_imageView addGestureRecognizer:longPress];
   
}
 
#pragma mark - 处理平移手势
- (void)pan:(UIPanGestureRecognizer *)pan {
   
  //获取手指的偏移量
  CGPoint tranp = [pan translationInView:self.imageView];
   
  //设置imageview的形变
  self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, tranp.x, tranp.y);
   
  //复位
  [pan setTranslation:CGPointZero inView:self.imageView];
   
}
 
#pragma mark - 处理旋转手势
- (void)rotation:(UIRotationGestureRecognizer *)rotation {
   
  //设置imageview的形变
  self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, rotation.rotation);
   
  //复位
  rotation.rotation = 0;
   
}
 
#pragma mark - 处理缩放手势
- (void)pinch:(UIPinchGestureRecognizer *)pinch {
   
  //设置imageview的形变
  self.imageView.transform = CGAffineTransformScale(self.imageView.transform, pinch.scale, pinch.scale);
   
  //复位
  pinch.scale = 1;
   
}
 
#pragma mark - 处理长按手势
- (void)longPress:(UILongPressGestureRecognizer *)longPress {
   
  //图片处理完成
  if (longPress.state == UIGestureRecognizerStateBegan) {
     
    //高亮效果
    [UIView animateWithDuration:0.25 animations:^{
      self.imageView.alpha = 0;
    } completion:^(BOOL finished) {
      
      [UIView animateWithDuration:0.25 animations:^{
        self.imageView.alpha = 1;
      } completion:^(BOOL finished) {
         
        //高亮时生成一张新的图片
        //开启位图上下文
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0);
         
        //获取位图上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
         
        //把控件的图层渲染到上下文
        [self.layer renderInContext:ctx];
         
        //从上下文中获取新的图片
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
         
        //关闭上下文
        UIGraphicsEndImageContext();
         
        //调用block
        if(_handleCompletionBlock) {
          _handleCompletionBlock(image);
        }
         
        //移除父控件
        [self removeFromSuperview];
         
      }];
       
    }];
     
     
  }
   
}
 
#pragma mark - 手势代理方法 <UIGestureRecognizerDelegate>
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
   
  //yes表示同时支持多个手势
  return YES;
   
}
 
- (void)setImage:(UIImage *)image {
   
  _image = image;
   
  //把图片展示到UIImageView上
  self.imageView.image = image;
 
}
 
@end

需要注意的是，当长按将操作过的图片绘制都画板上生成一张新的图片后，这时候需要把这个image设置给画板drawView，但是这时候就必须要在专门处理图片的view中去import画板view，这样耦合性太强。所以为了解耦，可以使用代理或者Block。我用了Block将刚刚生成的image先保存起来，在控制器中初始化imageHandleView之后再赋值给drawView。

最后保存画板上的内容就是将画板上的内容生成图片保存到相册即可。注意，保存完之后执行的方法必须是这个：

复制代码 代码如下:
- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo;

最后效果图是这样的:

以上就是本文的全部内容，希望对大家学习iOS程序设计有所帮助。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

iOS程序开发中设置UITableView的全屏分隔线的方法(不画线)
ableView是app开发中常用到的控件，功能很强大，多用于数据的显示。下面给大家介绍设置UITableView的全屏分隔线的两种方法
iOS开发之视图切换
在iOS开发中视图的切换是很频繁的，独立的视图应用在实际开发过程中并不常见，除非你的应用足够简单。在iOS开发中常用的视图切换有三种，今天我们将一一介绍,希望大家能够喜欢。
iOS开发之UITableView详解
在iOS开发中UITableView可以说是使用最广泛的控件，我们平时使用的软件中到处都可以看到它的影子，类似于微信、QQ、新浪微博等软件基本上随处都是UITableView。当然它的广泛使用自然离不开它强大的功能，今天这篇文章将针对UITableView重点展开讨
IOS程序开发之禁止输入表情符号实例代码
如何禁止输入表情符号呢？下面脚本之家小编给大家分享IOS程序开发之禁止输入表情符号实例代码，感兴趣的朋友参考下吧
iOS应用开发中使UITextField实现placeholder属性的方法
这篇文章主要介绍了iOS应用开发中使UITextField实现placeholder属性的方法,示例代码为传统的Objective-C语言,需要的朋友可以参考下
iOS开发之UIScrollView详解
UIScrollView使用非常广，本文研究UIScrollView各属性和方法，明白它们的意义、作用。这里我们整理UIScrollView一些常见用法以及一些效果的实现思路。
前端开发编程语言数据库服务器系统/运维网络/安全移动开发建站教程网站运营
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式