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

最后的效果(点击保存按钮保存下来的整个涂鸦板):

时间: 01-02

UI进阶--Quartz2D和触摸事件的简单使用:简易涂鸦板的相关文章

UI进阶--Quartz2D和触摸事件的简单使用:手势解锁

需求:实现一个简易的手势解锁应用,具体效果如下图所示: 实现步骤: 1.代码创建界面,自定义一个view,设置view的背景,颜色等属性: 2.在自定义的view中,定义2个属性,一个是存储被选中按钮的可变数组,另外一个是最后的触摸点(CGPoint); 3.重写initWithFrame方法,在这里,自定义一个方法给initWithFrame方法调用即可,这个自定义的方法里,初始化9个按钮,设置每个按钮的tag,正常状态下的图片以及选中状态的图片,并设置和用户的交互为NO: 4.在自定义的vi

[iOS UI进阶 - 3.0] 触摸事件的基本处理

A.需要掌握和练习的 1.介绍事件类型2.通过按钮的事件处理引出view的事件处理3.响应者对象 --> UIResponder --> UIView4.view的拖拽* 实现触摸方法,打印查看* 介绍touches和UIEvent参数* 扩展:点哪去哪5.涂鸦6.手势解锁7.事件的产生和传递8.响应者链条 9.手势 B.概念 1.iOS有3种主要事件 触摸事件 加速计事件 远程控制事件 2.响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事

[iOS UI进阶 - 3.1] 触摸事件的传递

A.事件的产生和传递 发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中 UIApplication会从事件队列中取出最前面的事件,并将事件分发下去以便处理,通常,先发送事件给应用程序的主窗口(keyWindow) 主窗口会在视图层次结构中找到一个最合适的视图来处理触摸事件,这也是整个事件处理过程的第一步 找到合适的视图控件后,就会调用视图控件的touches方法来作具体的事件处理touchesBegan-touchesMoved- touchedEnded-

UI进阶--Quartz2D简单介绍

1.Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统的API是纯C语言的,API来自于Core Graphics框架,数据类型和函数基本都以CG作为前缀,如: CGContextRef CGPathRef CGContextStrokePath(ctx); …… 2.Quartz2D可以做的工作: 绘制图形 : 线条\三角形\矩形\圆\弧\扇形等; 绘制文字; 绘制\生成图片(图像); 读取\生成PDF; 截图\裁剪图片; 自定义UI控件; ...... 3.Quartz2D在i

IOS开发——UI进阶篇(十三)UITabBarController简单使用,qq主流框架

一.UITabBarController简单使用 // 程序加载完毕 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // 创建窗口 self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; // 设置窗口的根控制器 UITabB

IOS开发——UI进阶篇(八)pickerView简单使用,通过storyboard加载控制器,注册界面,通过xib创建控制器,控制器的view创建,导航控制器的基本使用

一.pickerView简单使用 1.UIPickerViewDataSource 这两个方法必须实现 // 返回有多少列 - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView; // 返回第component有多少行 - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;

UI进阶--Quartz2D绘制图形的基本使用

1.绘制线条: 1.1.在storyboard中拖拉一个view,并设置大小: 1.2.自定义一个类,继承自UIView,并与1.1中的view进行关联: 1.3.- (void)drawRect:(CGRect)rect方法中实现画线条: 1 // 2 // LineView.m 3 // Drawing 4 // 5 // Created by xiaomoge on 14/12/30. 6 // Copyright (c) 2014年 xiaomoge. All rights reserv

自定义触摸事件封装

以前做过将红外触摸框的触摸事件进行简单的输入子系统获取,使用的是C语言,这次特地将以前的C封装为C++类,这样使用起来相对方便.该触摸事件采用了andrdoid操作事件的思想,采用多线程一个负责读取事件,一个负责分发事件,在类中采用了线程,使用的是linux的pthread_create函数,在类中线程函数我采用的是友元函数的方式. inputEvent.h 代码如下: 1 #ifndef INPUTEVENT_H 2 #define INPUTEVENT_H 3 4 #include "gui

iOS学习笔记-iOS事件处理之触摸事件

在iOS学习中,接触最多的就是触摸事件,这节主要学习一下触摸事件的简单使用. 1.iOS中的事件 2.触摸事件 2.1 触摸事件的完整处理过程: 1> 先将事件对象由上往下传递(由父控件传递给子控件), 找到最合适的控件来处理这个事件 2> 调用最合适控件的touches.....方法 3> 如果调用了[super touches...];就会将事件顺着响应者链条往上传递,传递给上一个响应者 4> 接着就会调用上一个响应者的touches.....方法 2.2 什么是响应者链条?