iOS实现白板、画板功能,有趣的涂鸦工具,已封装,简单快捷使用
一、效果图:
二、选择颜色:
分【固定颜色模式】和【自由取模式】。
三、操作栏功能:
1、撤销:撤销上一步操作,可一直往上进行,直到全部清空。
2、清空:直接清除所有绘画。
3、橡皮擦:去除不要的绘画部分。
4、保存:一键保存相册。
四、实现方式:
贝塞尔曲线结合drawrect绘画。
代码结构:
核心代码模块:
- #pragma mark - 画画
- -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
- {
- UITouch *touch = [touches anyObject];
- CGPoint currentPoint = [touch locationInView:self];
- self.bezierPath = [[YJBezierPath alloc] init];
- self.bezierPath.lineColor = self.lineColor;
- self.bezierPath.isErase = self.isErase;
- [self.bezierPath moveToPoint:currentPoint];
- [self.beziPathArrM addObject:self.bezierPath];
- }
- -(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
- UITouch *touch = [touches anyObject];
- CGPoint currentPoint = [touch locationInView:self];
- CGPoint previousPoint = [touch previousLocationInView:self];
- CGPoint midP = midpoint(previousPoint,currentPoint);
- // 这样写不会有尖头
- [self.bezierPath addQuadCurveToPoint:currentPoint controlPoint:midP];
- [self setNeedsDisplay];
- }
- -(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
- UITouch *touch = [touches anyObject];
- CGPoint currentPoint = [touch locationInView:self];
- CGPoint previousPoint = [touch previousLocationInView:self];
- CGPoint midP = midpoint(previousPoint,currentPoint);
- [self.bezierPath addQuadCurveToPoint:currentPoint controlPoint:midP];
- // touchesMoved
- [self setNeedsDisplay];
- }
- -(void)drawRect:(CGRect)rect{
- if (self.beziPathArrM.count) {
- for (YJBezierPath *path in self.beziPathArrM) {
- if (path.isErase) {
- [self.backgroundColor setStroke];
- }else{
- [path.lineColor setStroke];
- }
- path.lineCapStyle = kCGLineCapRound;
- path.lineJoinStyle = kCGLineCapRound;
- if (path.isErase) {
- path.lineWidth = ; // 这里可抽取出来枚举定义
- [path strokeWithBlendMode:kCGBlendModeDestinationIn alpha:1.0];
- }else{
- path.lineWidth = ;
- [path strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];
- }
- [path stroke];
- }
- }
- [super drawRect:rect];
- }
外部引用代码:
- #import "BaiBanViewController.h"
- #import "BaibanView.h"
- @interface BaiBanViewController ()
- @property (nonatomic,strong) BaibanView *baibanV;
- @end
- @implementation BaiBanViewController
- -(BaibanView *)baibanV{
- if(_baibanV==nil){
- _baibanV=[[BaibanView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight - )];
- }
- return _baibanV;
- }
- - (void)viewDidLoad {
- [super viewDidLoad];
- self.navigationItem.title = @"画 板";
- [[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(, -) forBarMetrics:UIBarMetricsDefault];
- self.view.backgroundColor = [UIColor whiteColor];
- //添加画板功能
- [self.view addSubview:self.baibanV];
- }
简单吧~
五、源码获取:
我直接把我的测试Demo放上去了,大家下载后,直接定位画板功能即可。
========================更新于2017年==========================
上面那种方式,是利用drawrect方式绘画,通过cpu渲染,所以一定程度上比较耗cpu,内存也有一定上升
因此,如果你的应用不需要橡皮擦功能,只需要上一步或下一步这种的撤销操作,可以利用CAShapeLayer集合来实现,原理如下:
每一笔都是一个layer,然后一层层叠加在底view上,并记录到一个list里,这样,上一步和下一步都是直接对一个layer进行add或remove,简单明了,而且这种对于,绘画特殊图形也比较方便(比如画圆、矩形等)
下图是我另一个应用的涂鸦功能截图,这种对内存和cpu消耗特别低,而且集成了缩放、旋转功能, 大家可以借鉴一下。
但这种实现,如果需要橡皮擦功能,只能实现橡皮擦擦除区域与layer有交汇点,就清除layer(类似苹果相册编辑里的橡皮擦功能),如果想实现任意清除, 我暂时没想到特别好的解决方式。
iOS实现白板、画板功能,有趣的涂鸦工具,已封装,简单快捷使用的更多相关文章
- iOS之开发支付功能概述
前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...
- IOS开发之支付功能概述
前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...
- iOS项目开发常用功能静态库
YHDeveloperTools iOS项目开发常用功能静态库 查看源码 功能方法: 1.字符检查 [NSString checkStringWithType:Email andTargetStrin ...
- iOS的录屏功能
iOS的录屏功能其实没什么好说的,因为网上的教程很多,但是网上的Demo无一例外几乎都有一个bug,那就是iPad上会出现闪退,这也体现了国内的教程文档的一个特点,就是抄袭,教程几乎千篇一律,bug也 ...
- iOS开发UI篇—使用picker View控件完成一个简单的选餐应用
iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一.实现效果 说明:点击随机按钮,能够自动选取,下方数据自动刷新. 二.实现思路 1.picker view的有默认高度为162 ...
- 每位iOS开发者不容错过的10大有用工具
内容简单介绍 1.iOS简单介绍 2.iOS开发十大有用工具之开发环境 3.iOS开发十大有用工具之图标设计 4.iOS开发十大有用工具之原型设计 5.iOS开发十大有用工具之演示工具 6.iOS开发 ...
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...
- XML真正强大的功能是来自其元素与封装的内容
创建文档类型声明 一般而言,XML声明放在文档顶部.在PHP中声明十分简单:只需实例化一个DOM文档类的对象并赋予它一个版本号.查看程序清单A: 程序清单 A <?php// create do ...
- iOS开发UI篇—Date Picker和UITool Bar控件简单介绍
iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...
随机推荐
- HUST 1353 Dartboard
构造.应该有多种构造方法.做的时候WA了好几发,怀疑做法是错的,事实上是代码写搓了.. 我是这样构造的:先从上往下左右放奇数,再从下往上左右填偶数 (一)如果n/2是偶数(以12为例) 左边列是内环, ...
- 在阿里云ECS(CentOS6.5)上安装mysql
首先查看服务器上是否已经安装过mysql 命令: rpm -qa | grep mysql 结果: 可以看到ECS上已经有mysql-libs这个包了.这并不影响安装. 查看yum服务器上提供的mys ...
- ue4中窗口打开web地址
首先打开项目,设置,widgets,启用webbroswer 新建一个蓝图, 在控件栏里就可以找到添加webbroswer 设置initial url就可以打开网页了, 项目中还用到获取界面参数,与界 ...
- 火狐上的一个post提交工具(主要用于测试接口时候)
添加的过程 安装完后,就可以在下图上,看到一个poster 点击poster就可以看到下图 图中红线圈好的,是必须要填写的 Url是访问路径 Name是参数名称 Value是参数值 需要注意一点的是: ...
- ubuntu12.04+fuerte 下跑通lsd-slam——数据集
lsd-slam(下载链接:https://github.com/tum-vision/lsd_slam)提供了两种方法,一种是用数据集(下载地址http://vision.in.tum.de/lsd ...
- Listener
通过Listner获得当前的用户个数 package listener; import javax.servlet.ServletContext; import javax.servlet.Servl ...
- XP Mode 虛擬機器 for Windows 7
免驗證官方直接下載 官網 Download Windows Virtual PC XP Mode for Windows 7 性質 Windows 7 免費 / en 多國 繁體中文(Traditio ...
- FlexGrid简单demo
1.首先加入以下代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...
- UVa 10911 - Forming Quiz Teams
题目大意:给出2*n个点,将这些点配成n对,使得所有点对中两点的距离之和尽量小. 用一个整数的二进制形式表示一个集合的子集,以每个集合为状态进行状态转移.具体参见<算法竞赛入门经典>9.5 ...
- css--position和float
1.元素设置position:relative或者position:absolute后,才能激活left,top,right,bottom和z-index属性,默认情况下这些属性并未激活,设置了也会无 ...