Sian 发表于 2014-12-19 17:40:37

监听屏幕触摸事件实现涂鸦

一、直接上图



二、设计说明

1、UIView继承自UIResponder,UIResponder能响应所有的事件与用户进行交互,如:触摸事件(单点/多点触控)、加速事件(重力感应)、远程事件(耳机播放/暂停/下一曲)

2、触摸事件主要涉及以下4个方法

// 开始触屏时调用,只调用一次
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;

// 屏幕上移动时调用,反复调用且频率较高
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;

// 离开屏幕时调用,只调用一次
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;

// 中断时调用,如被来电中断
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;

3、结合上述相关方法,使用Quartz2D绘制图形到当前视图

4、将图形保存到本地相册

三、关键代码

#import "SAView.h"

@implementation SAView

#pragma mark - 初始化
- (NSMutableArray *)paths
{
    if (_paths == nil) {
      _paths = ;
    }
    return _paths;
}
// 图层渲染方法,每调用setNeedsDisplay方法都会调用此方法
- (void)drawRect:(CGRect)rect
{
    for (UIBezierPath *path in self.paths) {
      ;
    }
}

#pragma mark - 触摸事件处理
// 开始涂鸦(以每一笔为基本单位),接触屏幕时调用一次
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    NSLog(@"touchesBegan");
    // 创建一个贝赛尔曲线对象,设置相关属性(圆角线条、线条粗细)
    UIBezierPath *path = ;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    path.lineWidth = 5;
   
    // 通过touch事件获取位置变化传入给贝赛尔曲线
    CGPoint point = [ locationInView:self];
    ;
   
    // 将该曲线对象加入到数组
    ;
   
    // 刷新图层
    ;
}

// 移动手指,手指移动时会反复调用,频率较高
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    NSLog(@"touchesMoved");
    /* 获取当前画笔跟随触摸移动继续绘制
   * 该方法调用频率非常高,一点点移动都会调用多次
   * 所以画出的多条折线视觉上是连续的
   */
    UIBezierPath *path = ;
    CGPoint point = [ locationInView:self];
    ;
   
    // 刷新图层
    ;
   
}

// 结束触摸,即手指离开时调用一次
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    NSLog(@"touchesEnded");
    ;
}

#pragma mark - 按钮事件处理
// 回退,即移除上一个画笔对象
- (IBAction)back:(id)sender
{
    ;
    ;
}
// 清除,移除所有画笔对象
- (IBAction)clean:(id)sender
{
    ;
    ;
}
// 保存图片到本地相册
- (IBAction)save:(id)sender
{
    // 开启图片上下文
    UIGraphicsBeginImageContext(self.frame.size);
   
    // 将当前view上内存渲染到当前上下文
    ;
   
    // 将当前上下文内容转换为图片对象
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
   
    // 关闭图片上下文
    UIGraphicsEndImageContext();
   
    // 将图片保存到本地相册
    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);
}
@end
四、Demo下载:**** Hidden Message *****

活在梦里丶 发表于 2015-6-26 15:52:58

感谢楼主的分享

喵了个咪 发表于 2015-6-29 09:05:45

很不错 , 学习学习 !

luojiongyan 发表于 2015-7-7 00:27:51

很好很强大
页: [1]
查看完整版本: 监听屏幕触摸事件实现涂鸦