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程序设计有所帮助。

时间: 2016-04-05

IOS实现的简单画板功能

效果图 设计要求 1.画笔能设置大小.颜色 2.有清屏.撤销.橡皮擦.导入照片功能 3.能将绘好的画面保存到相册 实现思路 1.画笔的实现,我们可以通过监听用户的 平移手势 中创建 UIBezierPath 来实现线条的绘制 2.撤销功能,我们先来看下撤销功能,我们会想到用一个数组队列将用户的每一次的笔画都加入到数组中,然后撤销的时候只需要将最后添加进去的笔画pop掉,重新绘制就可以了 3.清屏功能就简单了,只需要将上面说到的那个数组清空重新绘制下就可以了 4.导入照片功能,可以用系统的 UII

分享一个iOS下实现基本绘画板功能的简单方法

代码部分 TouchView.h 复制代码 代码如下: #import <UIKit/UIKit.h>    @interface TouchView : UIView  {      NSMutableArray *points;      NSArray *points_all;      CGContextRef context;      UIColor *paint_clr;  }  @property (strong,nonatomic) NSMutableArray *point

php删除一个路径下的所有文件夹和文件的方法

php遍历一个文件夹内的所有文件和文件夹,并删除所有文件夹和子文件夹下的所有文件的代码,通过递归方式实现达到清空一个目录的效果,代码简单实用. 也适合在thinkphp中清理缓存,在thinkphp中可以把下面代码写入./Application/Admin/Common/function.php文件中,再在控制器调用这个函数进行清理操作. 用到的函数: scandir($path)    遍历一个文件夹所有文件并返回数组.     unlink($filename)    删除文件.     r

Linux下文件的切分与合并的简单方法介绍

linux下文件分割可以通过split命令来实现,可以将一个大文件拆分成指定大小的多个文件,并且拆分速度非常的快,可以指定按行数分割和安大小分割两种模式.Linux下文件合并可以通过cat命令来实现,非常简单. 在Linux下用split进行文件分割 先看下帮助文档 Usage: split [OPTION]... [INPUT [PREFIX]] Output fixed-size pieces of INPUT to PREFIXaa, PREFIXab, ...; default size

iOS下Safari点击事件失效的解决方法

前言 本文主要给大家介绍了关于在iOS下Safari浏览器点击事件失效的相关解决方案,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 可以使用下面的代码在 iOS 中进行测试. <!DOCTYPE html> <html> <head> <meta

linux(centos5.5)/windows下nginx开启phpinfo模式功能的配置方法分享

经过志文工作室测试有效的相关配置主要内容如下: 复制代码 代码如下: location ~ \.php(.*)$ { fastcgi_pass   unix:/tmp/php-cgi.sock; fastcgi_index  index.php; fastcgi_split_path_info ^(.+\.php)(.*)$; fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param   P

在Linux下用软件实现RAID功能的实现方法

mdadm使用的也是md驱动,由于其拥有多种模式,而且单一工具,不依赖所有设置文件,是替代raidtools的好工具.目前几乎所有发行版本使用的都是该工具.一.安装和编译源码下载:http://www.cse.unsw.edu.au/~neilb/source/mdadm/编译:tar xzvf ./mdadm-1.6.0.tgzcd mdadm-1.6.0make installrpm安装:rpm -ivh mdadm-1.6.0-3.rpm※源码最新版本是2.5,由于我使用的1.6.0的rp

在iOS中使用OpenGL ES实现绘画板的方法

今天我们使用 OpenGL ES 来实现一个绘画板,主要介绍在 OpenGL ES 中绘制平滑曲线的实现方案. 首先看一下最终效果: 在 iOS 中,有很多种方式可以实现一个绘画板,比如我的另外一个项目 MFPaintView 就是基于 CoreGraphics 实现的. 然而,使用 OpenGL ES 来实现可以获得更多的灵活性,比如我们可以自定义笔触的形状,这是其他实现方式做不到的. 我们知道,OpenGL ES 中只有 点.直线.三角形 这三种图元.因此, 怎么在 OpenGL ES 中绘

原生JS实现自定义下拉单选选择框功能

浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装了一下,以构造函数的方式进行封装,主要方法和事件定义在原型上,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考.代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,或者直接bable转下. 先放个预览图吧,后面有最终的动态效果图:(样式和交互参考了阿里和Iview U

iOS多线程实现多图下载功能

本文实例为大家分享了iOS多线程实现多图下载功能的具体代码,供大家参考,具体内容如下 一.模型文件代码如下 // XMGAPP.h #import <Foundation/Foundation.h> @interface XMGAPP : NSObject /** APP的名称 */ @property (nonatomic, strong) NSString *name; /** APP的图片的url地址 */ @property (nonatomic, strong) NSString *

iOS实现app间跳转功能

本文为大家分享了iOS实现app间跳转功能的具体代码,供大家参考,具体内容如下 我们通过系统的openURL方法,可以从当前的app跳转到其他任意app去,包括系统自带的.以及我们开发的app. 本文模拟A app跳转到 B app A app代码: // A app // ViewController.m // 程序跳转 // // Created by hhg on 15/10/23. // Copyright (c) 2015年 hhg. All rights reserved. // #