UI进阶--Quartz2D和触摸事件的简单使用:简易涂鸦板
需求:实现一个简易的涂鸦板应用,使用鼠标在涂鸦板内拖动即可进行涂鸦,点击保存按钮,可以把完成的涂鸦保存,点击回退按钮可以向后退回一步,点击清空可以让涂鸦板清空。
实现步骤:
1、布局storyboard,连线各按钮以及涂鸦板;
2、监听触摸事件,主要为touchesBegan:和touchesMoved:;
3、获取移动的路径并添加到 UIBezierPath 对象;
4、渲染;
示例文件结构:
具体实现代码:
1 // 2 // Scrawl.h 3 // 1-04-Scrawl 4 // 5 // Created by xiaomoge on 15/1/4. 6 // Copyright (c) 2015年 xiaomoge. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h> 10 11 @interface Scrawl : UIView 12 /* 13 涂鸦线条的宽度 14 */ 15 @property (nonatomic,assign) CGFloat linsWidth; 16 /* 17 回退 18 */ 19 - (void)back; 20 /* 21 清屏 22 */ 23 - (void)clear; 24 @end
1 // 2 // Scrawl.m 3 // 1-04-Scrawl 4 // 5 // Created by xiaomoge on 15/1/4. 6 // Copyright (c) 2015年 xiaomoge. All rights reserved. 7 // 8 9 #import "Scrawl.h" 10 @interface Scrawl () 11 /* 12 存储所有线的路径的数组 13 */ 14 @property (nonatomic,strong) NSMutableArray *linsPath; 15 @end 16 @implementation Scrawl 17 #pragma mark - 懒加载 18 - (NSMutableArray *)linsPath { 19 if (!_linsPath) { 20 _linsPath = [NSMutableArray array]; 21 } 22 return _linsPath; 23 } 24 - (void)drawRect:(CGRect)rect { 25 //获得当前数组中的总数 26 NSInteger count = self.linsPath.count; 27 for (NSInteger i = 0; i < count; i ++) { 28 //取得一个path对象 29 UIBezierPath *path = self.linsPath[i]; 30 //设置线宽 31 path.lineWidth = self.linsWidth; 32 //设置线的首尾样式 33 path.lineCapStyle = kCGLineCapRound; 34 //设置线的连接样式 35 path.lineJoinStyle = kCGLineJoinRound; 36 //渲染 37 [path stroke]; 38 } 39 } 40 //开始触摸事件 41 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { 42 //取得当前触摸点的位置 43 UITouch *touch = [touches anyObject]; 44 CGPoint point = [touch locationInView:touch.view]; 45 //创建一个path对象,注意这里是[UIBezierPath bezierPath] 46 UIBezierPath *path = [UIBezierPath bezierPath]; 47 //创建path对象的起点位置 48 [path moveToPoint:point]; 49 //添加到线的路径数组中 50 [self.linsPath addObject:path]; 51 } 52 //移动触摸事件 53 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { 54 //取得当前触摸点的位置 55 UITouch *touch = [touches anyObject]; 56 CGPoint point = [touch locationInView:touch.view]; 57 //创建一个path对象,为线的路径当前的点 58 UIBezierPath *path = [self.linsPath lastObject]; 59 //设置path对象的结束点 60 [path addLineToPoint:point]; 61 //重绘 62 [self setNeedsDisplay]; 63 } 64 //回退事件 65 - (void)back { 66 //回退其实就是把最后的一条线给清除 67 [self.linsPath removeLastObject]; 68 //然后重绘 69 [self setNeedsDisplay]; 70 } 71 - (void)clear { 72 //回退其实就是把所有的线给清除掉 73 [self.linsPath removeAllObjects]; 74 //然后重绘 75 [self setNeedsDisplay]; 76 } 77 @end
1 // 2 // ViewController.m 3 // 1-04-Scrawl 4 // 5 // Created by xiaomoge on 15/1/4. 6 // Copyright (c) 2015年 xiaomoge. All rights reserved. 7 // 8 9 #import "ViewController.h" 10 #import "Scrawl.h" 11 @interface ViewController () 12 @property (weak, nonatomic) IBOutlet Scrawl *scrawlView; 13 14 @end 15 16 @implementation ViewController 17 18 - (void)viewDidLoad { 19 [super viewDidLoad]; 20 self.scrawlView.linsWidth = 3; 21 } 22 - (IBAction)backClick { 23 [self.scrawlView back]; 24 } 25 - (IBAction)clearClick { 26 [self.scrawlView clear]; 27 } 28 - (IBAction)saveClick { 29 //开启位图上下文 30 UIGraphicsBeginImageContext(self.scrawlView.frame.size); 31 //渲染 32 [self.scrawlView.layer renderInContext:UIGraphicsGetCurrentContext()]; 33 //获取当前位图上下文里的图片 34 UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); 35 //结束位图上下文的编辑 36 UIGraphicsEndImageContext(); 37 //把图片转为NSData 38 NSData *data = UIImagePNGRepresentation(img); 39 //保存 40 [data writeToFile:@"/Users/xiaobao/Desktop/scrawl.png" atomically:YES]; 41 //注意,这里其实也可以把这个保存图片抽取成一个方法,然后调用即可。 42 } 43 @end
最后的效果(点击保存按钮保存下来的整个涂鸦板):
转载于:https://www.cnblogs.com/xiaomoge/p/4202043.html
UI进阶--Quartz2D和触摸事件的简单使用:简易涂鸦板相关推荐
- html5里可移动线性进度条的类型怎么表示,HTML5触摸事件实现移动端简易进度条的实现方法...
这篇文章主要介绍了关于HTML5触摸事件实现移动端简易进度条的实现方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 前言 HTML中新添加了许多新的事件,但由于兼容性的问题,许多事件 ...
- iOS开发UI篇—Quartz2D简单使用(二)
iOS开发UI篇-Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...
- Android触摸事件进行画图简单实现
首先先说两个类:canva与paint:这两个类在·Android中绘图用途非常广:后续还会继续更新关于这两个类的一些用法: 下面先进行一个简单的实现:(这里需要实现的是下面4个按钮,最后把自己画的图 ...
- React Native 手势触摸事件机制详解(进阶篇)
源码已开源到Github,详细代码可以查看:<React Native 触摸事件代码实践>. 在基础篇,对RN中的触摸事件做了详细的介绍.相信大家对于触摸事件流程机制有了更为清晰的认识.没 ...
- cocos2dx3.x使用cocostudio触摸事件不响应的奇葩问题
cocos2dx3.x使用cocostudio触摸事件不响应的奇葩问题 刚刚使用3.1,发现了一些关于触摸的不同之处,对于习惯于2.x的人还是认为坑啊,简单总结一下: 使用cocostudio加进来的 ...
- iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控
-- iOS事件全面解析 概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事 ...
- Android 系统(74)---Android手势触摸事件的分发和消费机制
Android手势&触摸事件的分发和消费机制 在Android 客户端开发过程中,经常会遇到手势事件的处理,本篇博文讲一下本人对touch事件处理机制的一些理解,希望对一些初级开发者有所帮助. ...
- android方向触摸事件,Android触摸事件传递机制,这一篇就够了
整个触摸事件牵涉到的是,Activity,View,ViewGroup三者的传递机制. 这个触摸事件就是从外层往内层一层层的传递. 整个传递机制,分为3个步骤:分发,拦截,和消费. 1. 触摸事件的类 ...
- iphone 检测屏幕触摸事件
原博客 : http://www.yifeiyang.net/iphone-developer-advanced-8-touch-screen-test-event/ iPhone开发进阶(8)--- ...
最新文章
- linux nfs共享文件
- 推荐11个构建和测试API的顶级工具
- 斯坦福大学的机器学习跟深度学习。
- 1107 Social Clusters (30 分)【难度: 中 / 知识点: 并查集】
- 【职场】为什么要 “打工人” ?
- 神经稀疏体素场论文笔记
- 关于服务器虚化的优势,vmware虚化优势.docx
- php的curl如何返回值,怎么在PHP中利用CURL获取返回值
- Hbuilder开发app实战-识岁06-face++的js实现【完结】
- MYSQL数据丢失讨论
- 计算机考试专业知识题库,专业知识:计算机考试题库练习题
- VBA下载糗事百科图片
- svg之defs以及use的使用
- Flink 与 Storm的对比
- docker日志显示时间时区错误,时区UST问题/群晖docker日志时间不正确 寻找解答过程
- Windows高级工程师:GDI+绘图;基础入门大全
- 如何做推广?利用今日头条吸引大量精准粉丝
- 重装系统重启后出现booting windows_电脑重装系统教程来了,Win10 20H2正式版安装图解...
- 全栈的好处:七天和两周
- 鼠标跟计算机的USB设备运行不正常,为什么鼠标跟这台计算机连接的一个USB设备运行不正常,windo? 爱问知识人...
热门文章
- 可持久化-可持久化字典树
- 【测评】用这款神器2小时就撸完了1天工作量的代码!爽
- oc引导windows蓝屏_人人都会遇到系统蓝屏问题,教大家自已排除蓝屏,学会一辈子受用...
- 怎样在html中实现图层重叠,javascript – 在HTML5画布中实现图层
- linux如何加设磁盘配额,Linux系统攻略:如何为添加的硬盘做配额
- iview 下拉select样式_Vue.js相关:iview实现select tree树形下拉框的示例代码
- api与密度转换公式_API重度和密度换算公式
- 安卓期末项目源码_手机随时随地写Python,还可以开发安卓APP,太厉害了!
- php 微信分享功能_使用php怎么实现一个微信分享朋友链接功能
- php 代码如何使用,PHP如何使用strval()函数?用法和代码示例