多点触控画图画轨迹

Multi-Touch_SmoothDrawing

1. 这几天学习了如何在手机的屏幕上画轨迹的知识，具体指的是当手指在手机的屏幕上滑动的时候，屏幕上留下了手指划过的痕迹。留下的痕迹是圆滑的而不是点到点生硬的直线。

2. 接下来说一下处理手指滑动的这事件所需要实现的系统方法：

   /** 手指接触屏幕时，触发这个方法 */
   - (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. 创建一个继承自UIView的类，我命名为MultiTouchTrackerView，使用画图功能时，必须实现系统提供的- (void)drawRect:(CGRect)rect;方法，绘图的功能全在里面完成，但是画图的构建路径（画笔的行走路径）可以在这个方法之外。创建类，一般都会有属于自己的属性，那么这些属性的初始化工作就应该放在系统方法中的- (id)init; - (id)initWithFrame:(CGRect)frame;或者- (id)initWithCoder:(NSCoder *)aDecoder;方法中。其中- (id)initWithCoder:(NSCoder *)aDecoder;方法是不能自己手动进行调用的，这个方法是在使用storyboard时，某一个UIView继承自自己写的MultiTouchTrackerView的时候，系统自动穿件视图的实例时会自动调用这个方法进行数据的初始化操作。而- (id)init; 和 - (id)initWithFrame:(CGRect)frame;这两个方法，自己手动的创建视图的实例的时候就可以调用，在创建的过程中也就是对数据的初始化的过程。

4. 在我设计的画图类中，可以选择画笔的是否带有圆光标的样式，可以弹性的选择画笔的大小，颜色和光标的类型，光标的大小和颜色。并且提供接口，因为画图嘛，特殊情况下有人们都想测试手机屏幕的触摸程度是怎么样的，就会到需要在全屏幕的状态下进行画轨迹。所以提供了这样的一个：- (void)didDoubleClickTrackerView:(MultiTouchTrackerView *)trackerView;方法，当双击手屏幕的时候就会触发，创建MultiTouchTrackerView的时候设置代理，并且实现代理方法，在里面根据自己的需求是否全屏。

//
//  MultiTouchTrackerView.h
//  TouchScreenDemo
//
//  Created by shimei on 7/14/16.
//  Copyright © 2016 Shimei. All rights reserved.
//

#import 


@class MultiTouchTrackerView;
@protocol MultiTouchTrackerViewDelegate 

- (void)didDoubleClickTrackerView:(MultiTouchTrackerView *)trackerView;

@end

@interface MultiTouchTrackerView : UIView
#pragma mark - property
@property(nonatomic, weak)   id  delegate;

@property(nonatomic, assign) BOOL        isRoundCursor;        // 判断光标是不是圆，默认是NO，非圆形光标
@property(nonatomic, copy)   UIColor    *cursorColor;          // 光标的颜色
@property(nonatomic, assign) float       cursorRadius;         // 光标的半径长度
@property(nonatomic, strong) UIColor    *lineColor;            // 线条的颜色
@property(nonatomic, assign) float       lineWidth;            // 线条的宽度


- (void)clear;

@end

5.创建实例变量：

@interface MultiTouchTrackerView ()
{
    NSMutableArray      *strokes;
    NSMutableDictionary *touchPaths;
    NSMutableDictionary *cursors;
    CGPoint              points[5];
    int                  index;
    UIButton            *cursorButton;
    
    BOOL                _isRoundCursor;
    UIColor             *_cursorColor;
    float               _cursorRadius;
    UIColor             *_lineColor;
    float               _lineWidth;
}

@property (strong, nonatomic) UITextView *localtionTextView;

@end

6.实现自己数据的初始化的工作：

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]){
        self.backgroundColor = [UIColor whiteColor];
        self.multipleTouchEnabled = YES;
        strokes = [NSMutableArray array];
        touchPaths = [NSMutableDictionary dictionary];
        cursors = [NSMutableDictionary dictionary];
        
        // 属性的初始化
        _isRoundCursor = NO;
        _cursorColor = [UIColor purpleColor];
        _cursorRadius = 15;
        _lineColor = [UIColor blackColor];
        _lineWidth = 2.0;
        
        [self addSubview:self.localtionTextView];
        self.localtionTextView.text = [NSString stringWithFormat:@"\tp1(%.0lf,%.0lf)",points[0].x, points[0].y];
    }
    
    return self;
}

/** 
 *  使用storyboard时，系统会自动创建视图的实例，会自动的调用initWithCoder方法。
 *  注意：这个方法是绝对不能自己手动进行调用的。
 */
- (id)initWithCoder:(NSCoder *)aDecoder {
    
    if (self = [super initWithCoder:aDecoder]) {
        self.multipleTouchEnabled = YES;
        strokes = [NSMutableArray array];
        touchPaths = [NSMutableDictionary dictionary];
        cursors = [NSMutableDictionary dictionary];
        
        // 属性的初始化
        _isRoundCursor = NO;
        _cursorColor = [UIColor purpleColor];
        _cursorRadius = 15;
        _lineColor = [UIColor blackColor];
        _lineWidth = 2.0;
        
        [self addSubview:self.localtionTextView];
        self.localtionTextView.text = [NSString stringWithFormat:@"\tp1(%.0lf,%.0lf)",points[0].x, points[0].y];
        
    }
    return self;
}

7.最后就是在第2步中说到的几个方法中实现绘图的功能了。