AJ学IOS(34)UI之Quartz2D画画板的实现
AJ分享,必须精品
效果:
实现过程:
首先用storyboard搭建界面,没有什么好说的。
然后就是注意的功能了,这里用了触摸事件来搭配Quartz2D的路径来画画。
思路就是把路径放到数组中
@property (nonatomic, strong) NSMutableArray *paths;
这里注意 如果用c语言的这个方式
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 20, 20);
CGPathAddLineToPoint(path, NULL, 100, 100);
画的话,是不能放到oc的数组中的,所以用了UIBezierPath创建一个路径对象。
UIBezierPath *path = [UIBezierPath bezierPath];
然后就是把路径放到数组中,渲染
注意:刚刚开始我没有调用重绘方法,然后悲剧了,啥都没有。郁闷老半天。
重绘:
调用drawRect方法重回视图
[self setNeedsDisplay];
代码实现
开始触摸:
// 开始触摸
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 1.获取手指对应UITouch对象
UITouch *touch = [touches anyObject];
// 2.通过UITouch对象获取手指触摸的位置
CGPoint startPoint = [touch locationInView:touch.view];
// 3.当用户手指按下的时候创建一条路径
UIBezierPath *path = [UIBezierPath bezierPath];
// 3.1设置路径的相关属性
[path setLineJoinStyle:kCGLineJoinRound];
[path setLineCapStyle:kCGLineCapRound];
[path setLineWidth:10];
// 4.设置当前路径的起点
[path moveToPoint:startPoint];
// 5.将路径添加到数组中
[self.paths addObject:path];
}
移动:
// 移动
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
// 1.获取手指对应UITouch对象
UITouch *touch = [touches anyObject];
// 2.通过UITouch对象获取手指触摸的位置
CGPoint movePoint = [touch locationInView:touch.view];
// 3.取出当前的path
UIBezierPath *currentPaht = [self.paths lastObject];
// 4.设置当前路径的终点
[currentPaht addLineToPoint:movePoint];
// 6.调用drawRect方法重回视图
[self setNeedsDisplay];
}
回退和清屏方法:
- (void)clearView
{
[self.paths removeAllObjects];
[self setNeedsDisplay];
}
- (void)backView
{
[self.paths removeLastObject];
[self setNeedsDisplay];
}
画线方法就是遍历数组中的UIBezierPath对象来实现
// 画线
- (void)drawRect:(CGRect)rect
{
[[UIColor redColor] set];
// 边路数组绘制所有的线段
for (UIBezierPath *path in self.paths) {
[path stroke];
}
}
AJ学IOS(34)UI之Quartz2D画画板的实现的更多相关文章
- AJ学IOS(28)UI之Quartz2D简单介绍
AJ分享,必须精品 iOS开发UI篇—Quartz2D简单介绍 什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : ...
- iOS开发UI篇—Quartz2D简单使用(一)
iOS开发UI篇—Quartz2D简单使用(一) 一.画直线 代码: 1 // 2 // YYlineview.m 3 // 03-画直线 4 // 5 // Created by apple on ...
- iOS开发UI之Quartz2D使用(绘制基本图形)
iOS开发UI篇—Quartz2D使用(绘制基本图形) 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 ...
- iOS开发UI篇—Quartz2D使用(绘制基本图形)
iOS开发UI篇—Quartz2D使用(绘制基本图形) 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 ...
- iOS开发UI篇—Quartz2D简单介绍
iOS开发UI篇—Quartz2D简单介绍 一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\ ...
- iOS开发UI篇—Quartz2D简单使用(一)
iOS开发UI篇—Quartz2D简单使用(一) 一.画直线 代码: // // YYlineview.m // 03-画直线 // // Created by apple on 14-6-9. // ...
- iOS开发UI篇—Quartz2D简单使用(二)
iOS开发UI篇—Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...
- iOS开发UI篇—Quartz2D使用(图形上下文栈)
iOS开发UI篇—Quartz2D使用(图形上下文栈) 一.qurza2d是怎么将绘图信息和绘图的属性绘制到图形上下文中去的? 说明: 新建一个项目,自定义一个view类和storyboard关联后, ...
- iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作) 一.关于矩阵操作 1.画一个四边形 通过设置两个端点(长和宽)来完成一个四边形的绘制. 代码: - (void)drawRect:(CGRect)r ...
随机推荐
- Hibernate一对多
例如:一个用户可以对应多个订单 但一个订单只能对应一个用户 1.创建实体类 2.编写映射文件 <?xml version="1.0"?> <!DOCTYPE h ...
- shell脚本基础-四种启动方式
1.当前路径启动 ./test.sh 2.绝对路径启动 pwd /data/beijing 'pwd'/test.sh 3.指定解释器执行 sh test.sh bash test.sh 4.shel ...
- Js的new运算符
new运算符 在JavaScript中,new是一个语法糖,可以简化代码的编写,可以批量创建对象实例. 语法糖Syntactic sugar,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影 ...
- CERN Root与CLING
CERN Root on Arch Linux For WSL: 一个CLI才是本体的程序居然有图形启动界面,莫名的微妙感 接触到Root是在一个4chan上喷matlab的thread里.某anon ...
- Prism 源码解读4-ViewModel注入
介绍 介绍一个Prism的MVVM实现,主要介绍Prism如何在WPF上进行的一些封装,以实现MVVM.MVVM到底是什么呢?看一下这一幅经典的图 以前没有ViewModel这个概念,就是将Model ...
- 15.自动部署web工程
用maven自动部署web工程 在pom.xml中写入以下: <build> <!--最终名称,进入网页时有http://localhost:8080/xxx/--> < ...
- 医学图像分割-在3DSlicer中使用英伟达的AI辅助工具NvidiaAIAssistedAnnotation自动切割医学图像教程
前期准备 下载3DSlicer并安装: 3DSlicer官网(http://www.slicer.org)或者直接下载(https://download.slicer.org),需要注意目前该插件只支 ...
- GitHub 运用实战入门,奶妈级教学
## 前言: 我不会用*官方*的语言告诉你Git 是什么,对此我表示深深得歉意--在我看来像CSDN.博客园.掘金等博客交流平台就是小的“GitHub”,只不过在这里更多的是一些零零散散的笔记或者文章 ...
- STL之vector常用函数笔记
STL之vector常用函数笔记 学会一些常用的vector就足够去刷acm的题了 ps:for(auto x:b) cout<<x<<" ";是基于范围的 ...
- Elasticsearch 核心术语概念
Elasticsearch 相当于一个关系型数据库 索引 index 类型 type 文档 document 字段 fields 跟关系型数据库对比 Elasticsearch 相当于一个数据库 索引 ...