一、效果图:

二、选择颜色:

分【固定颜色模式】和【自由取模式】。

 三、操作栏功能:

1、撤销:撤销上一步操作,可一直往上进行,直到全部清空。

2、清空:直接清除所有绘画。

3、橡皮擦:去除不要的绘画部分。

4、保存:一键保存相册。

四、实现方式:

贝塞尔曲线结合drawrect绘画。

代码结构:

核心代码模块:

  1. #pragma mark - 画画
  2. -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
  3. {
  4. UITouch *touch = [touches anyObject];
  5. CGPoint currentPoint = [touch locationInView:self];
  6. self.bezierPath = [[YJBezierPath alloc] init];
  7. self.bezierPath.lineColor = self.lineColor;
  8. self.bezierPath.isErase = self.isErase;
  9. [self.bezierPath moveToPoint:currentPoint];
  10.  
  11. [self.beziPathArrM addObject:self.bezierPath];
  12.  
  13. }
  14.  
  15. -(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
  16.  
  17. UITouch *touch = [touches anyObject];
  18. CGPoint currentPoint = [touch locationInView:self];
  19.  
  20. CGPoint previousPoint = [touch previousLocationInView:self];
  21. CGPoint midP = midpoint(previousPoint,currentPoint);
  22. // 这样写不会有尖头
  23. [self.bezierPath addQuadCurveToPoint:currentPoint controlPoint:midP];
  24. [self setNeedsDisplay];
  25.  
  26. }
  27.  
  28. -(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
  29. UITouch *touch = [touches anyObject];
  30. CGPoint currentPoint = [touch locationInView:self];
  31. CGPoint previousPoint = [touch previousLocationInView:self];
  32. CGPoint midP = midpoint(previousPoint,currentPoint);
  33. [self.bezierPath addQuadCurveToPoint:currentPoint controlPoint:midP];
  34. // touchesMoved
  35. [self setNeedsDisplay];
  36.  
  37. }
  1. -(void)drawRect:(CGRect)rect{
  2. if (self.beziPathArrM.count) {
  3. for (YJBezierPath *path in self.beziPathArrM) {
  4. if (path.isErase) {
  5. [self.backgroundColor setStroke];
  6. }else{
  7. [path.lineColor setStroke];
  8. }
  9.  
  10. path.lineCapStyle = kCGLineCapRound;
  11. path.lineJoinStyle = kCGLineCapRound;
  12. if (path.isErase) {
  13. path.lineWidth = ; // 这里可抽取出来枚举定义
  14. [path strokeWithBlendMode:kCGBlendModeDestinationIn alpha:1.0];
  15. }else{
  16. path.lineWidth = ;
  17. [path strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];
  18. }
  19. [path stroke];
  20. }
  21. }
  22.  
  23. [super drawRect:rect];
  24. }

外部引用代码:

  1. #import "BaiBanViewController.h"
  2. #import "BaibanView.h"
  3.  
  4. @interface BaiBanViewController ()
  5. @property (nonatomic,strong) BaibanView *baibanV;
  6.  
  7. @end
  8.  
  9. @implementation BaiBanViewController
  10.  
  11. -(BaibanView *)baibanV{
  12. if(_baibanV==nil){
  13. _baibanV=[[BaibanView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight - )];
  14. }
  15. return _baibanV;
  16. }
  17.  
  18. - (void)viewDidLoad {
  19. [super viewDidLoad];
  20. self.navigationItem.title = @"画 板";
  21. [[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(, -) forBarMetrics:UIBarMetricsDefault];
  22. self.view.backgroundColor = [UIColor whiteColor];
  23.  
  24. //添加画板功能
  25. [self.view addSubview:self.baibanV];
  26.  
  27. }

简单吧~

五、源码获取:

我直接把我的测试Demo放上去了,大家下载后,直接定位画板功能即可。

《点击这里获取全部源码》

========================更新于2017年==========================

上面那种方式,是利用drawrect方式绘画,通过cpu渲染,所以一定程度上比较耗cpu,内存也有一定上升

因此,如果你的应用不需要橡皮擦功能,只需要上一步或下一步这种的撤销操作,可以利用CAShapeLayer集合来实现,原理如下:

每一笔都是一个layer,然后一层层叠加在底view上,并记录到一个list里,这样,上一步和下一步都是直接对一个layer进行add或remove,简单明了,而且这种对于,绘画特殊图形也比较方便(比如画圆、矩形等)

下图是我另一个应用的涂鸦功能截图,这种对内存和cpu消耗特别低,而且集成了缩放、旋转功能, 大家可以借鉴一下。

但这种实现,如果需要橡皮擦功能,只能实现橡皮擦擦除区域与layer有交汇点,就清除layer(类似苹果相册编辑里的橡皮擦功能),如果想实现任意清除, 我暂时没想到特别好的解决方式。

iOS实现白板、画板功能,有趣的涂鸦工具,已封装,简单快捷使用的更多相关文章

  1. iOS之开发支付功能概述

    前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...

  2. IOS开发之支付功能概述

    前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...

  3. iOS项目开发常用功能静态库

    YHDeveloperTools iOS项目开发常用功能静态库 查看源码 功能方法: 1.字符检查 [NSString checkStringWithType:Email andTargetStrin ...

  4. iOS的录屏功能

    iOS的录屏功能其实没什么好说的,因为网上的教程很多,但是网上的Demo无一例外几乎都有一个bug,那就是iPad上会出现闪退,这也体现了国内的教程文档的一个特点,就是抄袭,教程几乎千篇一律,bug也 ...

  5. iOS开发UI篇—使用picker View控件完成一个简单的选餐应用

    iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一.实现效果 说明:点击随机按钮,能够自动选取,下方数据自动刷新. 二.实现思路 1.picker view的有默认高度为162 ...

  6. 每位iOS开发者不容错过的10大有用工具

    内容简单介绍 1.iOS简单介绍 2.iOS开发十大有用工具之开发环境 3.iOS开发十大有用工具之图标设计 4.iOS开发十大有用工具之原型设计 5.iOS开发十大有用工具之演示工具 6.iOS开发 ...

  7. ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

    本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...

  8. XML真正强大的功能是来自其元素与封装的内容

    创建文档类型声明 一般而言,XML声明放在文档顶部.在PHP中声明十分简单:只需实例化一个DOM文档类的对象并赋予它一个版本号.查看程序清单A: 程序清单 A <?php// create do ...

  9. iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

    iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...

随机推荐

  1. HUST 1353 Dartboard

    构造.应该有多种构造方法.做的时候WA了好几发,怀疑做法是错的,事实上是代码写搓了.. 我是这样构造的:先从上往下左右放奇数,再从下往上左右填偶数 (一)如果n/2是偶数(以12为例) 左边列是内环, ...

  2. 在阿里云ECS(CentOS6.5)上安装mysql

    首先查看服务器上是否已经安装过mysql 命令: rpm -qa | grep mysql 结果: 可以看到ECS上已经有mysql-libs这个包了.这并不影响安装. 查看yum服务器上提供的mys ...

  3. ue4中窗口打开web地址

    首先打开项目,设置,widgets,启用webbroswer 新建一个蓝图, 在控件栏里就可以找到添加webbroswer 设置initial url就可以打开网页了, 项目中还用到获取界面参数,与界 ...

  4. 火狐上的一个post提交工具(主要用于测试接口时候)

    添加的过程 安装完后,就可以在下图上,看到一个poster 点击poster就可以看到下图 图中红线圈好的,是必须要填写的 Url是访问路径 Name是参数名称 Value是参数值 需要注意一点的是: ...

  5. ubuntu12.04+fuerte 下跑通lsd-slam——数据集

    lsd-slam(下载链接:https://github.com/tum-vision/lsd_slam)提供了两种方法,一种是用数据集(下载地址http://vision.in.tum.de/lsd ...

  6. Listener

    通过Listner获得当前的用户个数 package listener; import javax.servlet.ServletContext; import javax.servlet.Servl ...

  7. XP Mode 虛擬機器 for Windows 7

    免驗證官方直接下載 官網 Download Windows Virtual PC XP Mode for Windows 7 性質 Windows 7 免費 / en 多國 繁體中文(Traditio ...

  8. FlexGrid简单demo

    1.首先加入以下代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  9. UVa 10911 - Forming Quiz Teams

    题目大意:给出2*n个点,将这些点配成n对,使得所有点对中两点的距离之和尽量小. 用一个整数的二进制形式表示一个集合的子集,以每个集合为状态进行状态转移.具体参见<算法竞赛入门经典>9.5 ...

  10. css--position和float

    1.元素设置position:relative或者position:absolute后,才能激活left,top,right,bottom和z-index属性,默认情况下这些属性并未激活,设置了也会无 ...