iOS_Quartz2D之涂鸦板

响应者对象：继承了UIResponder的对象

触摸事件：一根或多根手指；

开始触摸：

- (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;

远程控制事件：

- (void)remoteControlReceivedWithEvent:(UIEvent *)event NS_AVAILABLE_IOS(4_0);

UIToch对象：

触摸时，会为每个手指创建一个相关联的UITouch对象，保存着跟手指相关的信息，触摸的位置、时间等；

手指移动时，系统会更新同一个UITouch对象，一直保存手指触摸的位置；

手指移开时，销毁UITouch；

获取touch对象：UITouch * touch = [touches anyObject];

触摸点所在的view

touch.view

触摸点所在的window

touch.window

获取当前触摸点的位置,相对于哪个view的位置，填nil为相对于window；

CGPoint point = [touch locationInView:touch.view];

获取上一个触摸点的位置，可以用于touchesMoved方法中

CGPoint point2 = [touch previousLocationInView:touch.view];

效果图：

         画笔笔头根据画笔宽度进行改变:

原理：利用view的触摸事件，使用UIBezierPath对象进行涂鸦，UIBezierPath可以储存线段上的所有点，当成一条路径使用，并且被渲染到视图上；根据触摸点位置变化设置跟踪笔头；

我仅仅实现了效果，封装的不是很好完善，推荐这位大神的博客，封装思想很好点击这里

我有一个继承自UIView的tuyaView来作为白色涂鸦板，一个设置画笔属性的UIViewController，一个用于储存画笔属性的数据manager类；

图片

步骤：

涂鸦板view：

1、自定义一个继承自UIView的view作为涂鸦板，UIView继承自UIResponder，可以接收触摸事件； 声明三个数组属性用于存放线段以及线段属性，并且在懒加载中初始化；

2、在view的touchBegin事件中，新建一个UIBezierPath对象，使用它的moveToPoint方法将当前的触摸点设为这条线段的起点，并且将他存放到我们的线段数组中，从数据管理器中拿出线段的各种属性存放在属性数组中。初始化圆形画笔笔头，添加到涂鸦板上，中心位为触摸点；

4、监控手指的移动，将剩余线段点加入到上面创建的UIBezierPath对象中；从数组中取出贝塞尔对象，使用它的addLineToPoint方法，将移动后得到的当前点储存上；并且调用view的setNeedDisplay方法，重绘view；设置画笔笔头跟踪手指触摸移动。当触摸结束时，将笔头view移除；

5、实现view的drawRect方法：此方法用于绘制view，第四步设置了每当touchmove时都会调用此方法，从数组中拿出每一个贝塞尔对象，将它画到view上，并且取出相应的画笔样式；如果用户选取了照片就将照片绘制上去，这样绘制功能就实现了；

6、实现添加图片、退一步、清空画布、保存图片四个方法；

tuyaView.m

 @interface tuyaView ()

 保存每条线段

 @property (nonatomic, strong) NSMutableArray * linePaths;

 保存每条线段的画笔大小

 @property (nonatomic, strong) NSMutableArray * penValues;

 保存每条线段颜色

 @property (nonatomic, strong) NSMutableArray * penColors;

 数据管理器

 @property (nonatomic, strong) manager * m;

 画笔 笔头；

 @property (nonatomic, strong) UIView * touchPointView;

 @end

 @implementation tuyaView

 懒加载中初始化各个数组

 -(manager *)m

 {

     if (!_m)

     {

         _m = [manager shared];

     }

     return _m;

 }

 -(NSMutableArray *)penValues

 {

     if (!_penValues)

     {

         _penValues = [NSMutableArray array];

     }

     return _penValues;

 }

 - (NSMutableArray *)linePaths

 {

     if (!_linePaths) {

         _linePaths = [NSMutableArray array];

     }

     return _linePaths;

 }

 -(NSMutableArray *)penColors

 {

     if (!_penColors) {

         _penColors = [NSMutableArray array];

     }

     return _penColors;

 }

 触摸事件开始

 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

 {

     UITouch * touch = [touches anyObject];

     CGPoint point = [touch locationInView:touch.view];

     //

     UIBezierPath * linePath = [UIBezierPath bezierPath];

     [linePath moveToPoint:point];

     [self.linePaths addObject:linePath];

     //保存线条粗细

     float penValue = self.m.penValue;

     [self.penValues addObject:[NSNumber numberWithFloat:penValue ]];

     //保存线条颜色

     UIColor * penColor = self.m.penColor;

     [self.penColors addObject:penColor];

     //创建触控点

     CGFloat touchRadius = self.m.penValue + ;

     self.touchPointView = [[UIView alloc] initWithFrame:CGRectMake(point.x - touchRadius * 0.5, point.y - touchRadius * 0.5, touchRadius, touchRadius)];

     self.touchPointView.layer.cornerRadius = touchRadius * 0.5;

     self.touchPointView.clipsToBounds = YES;

     self.touchPointView.backgroundColor = [UIColor redColor];

     self.touchPointView.alpha = 0.5;

     [self addSubview:self.touchPointView];

 }

 手指移动

 -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

 {

     UITouch * touch = [touches anyObject];

     CGPoint touchPoint = [touch locationInView:touch.view];

     UIBezierPath * linePath = [self.linePaths lastObject];

     [linePath addLineToPoint:touchPoint];

     //触控点移动

     CGPoint current = [touch locationInView:touch.view];

     CGPoint pre = [touch previousLocationInView:touch.view];

     CGPoint center = self.touchPointView.center;

     center.x += current.x - pre.x;

     center.y += current.y - pre.y;

     self.touchPointView.center = center;

     [self setNeedsDisplay];

 }

 触摸结束

 -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

 {

     [self.touchPointView removeFromSuperview];

 }

 绘制view

 -(void)drawRect:(CGRect)rect

 {

     [self.tuyaImage drawInRect:CGRectMake(, , rect.size.width, rect.size.height)];

     for (int i = ; i < self.linePaths.count; i ++)

     {

         UIBezierPath * path = self.linePaths[i];

         //取出线条宽度

         float penValue = [self.penValues[i] floatValue];

         [path setLineWidth:penValue];

         //取出线条颜色

         UIColor * color = self.penColors[i];

         [color setStroke];

         [path setLineJoinStyle:kCGLineJoinRound];

         [path setLineCapStyle:kCGLineCapRound];

         [path stroke];

     }

 }

 选取图片

 - (void)fetchPictureWith:(UIImage *)image

 {

     self.tuyaImage = image;

     [self setNeedsDisplay];

 }

 退后一步

 - (void)backTheLastTime

 {

     [self.linePaths removeLastObject];

     [self.penValues removeLastObject];

     [self.penColors removeLastObject];

     [self setNeedsDisplay];

 }

 清空画布

 - (void)cleanAllPainted

 {

     [self.linePaths removeAllObjects];

     [self.penValues removeAllObjects];

     [self.penColors removeAllObjects];

     self.tuyaImage = nil;

     [self setNeedsDisplay];

 }

 保存图片到手机相册

 - (void)savePicture

 {

     //1、开启上下文

     UIGraphicsBeginImageContextWithOptions(self.frame.size, YES, 0.0);

     //2、将控制器view的layer渲染到上下文，想要截啥就把哪个图层拿出来渲染

     [self.layer renderInContext:UIGraphicsGetCurrentContext()];

     //3、取出图片

     UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();

     //保存到手机相册

     UIImageWriteToSavedPhotosAlbum(newImage, nil, nil, nil);

     //关闭上下文

     UIGraphicsEndImageContext();

 }

属性控制器：1、从数据管理器中取出数据显示到自身view上。2、当画笔样式被修改时，将数据保存到管理器中。3、和tuyaView通过UINavigationController跳转，各种控件通过Storyboard实现；

PropertyView.m

 @interface PropertyView ()

 @property (weak, nonatomic) IBOutlet UILabel *lalPen;

 @property (weak, nonatomic) IBOutlet UISlider *slider;

 @property (nonatomic, strong)manager * m;

 @property (weak, nonatomic) IBOutlet UISlider *sliderRed;

 @property (weak, nonatomic) IBOutlet UISlider *sliderGreen;

 @property (weak, nonatomic) IBOutlet UISlider *sliderBlue;

 @property (weak, nonatomic) IBOutlet UISlider *sliderAlpha;

 @property (weak, nonatomic) IBOutlet UILabel *lalRed;

 @property (weak, nonatomic) IBOutlet UILabel *lalGreen;

 @property (weak, nonatomic) IBOutlet UILabel *lalBlue;

 @property (weak, nonatomic) IBOutlet UILabel *lalAlpha;

 @property (weak, nonatomic) IBOutlet UIView *colorView;

 @end

 @implementation PropertyView

 -(void)viewDidLoad

 {

     [super viewDidLoad];

     self.m = [manager shared];

     self.slider.value = self.m.penValue;

     self.lalPen.text = [NSString stringWithFormat:@"画笔宽度：%0.1lf",self.m.penValue];

     self.lalRed.text = self.lalRed.text = [NSString stringWithFormat:@"红：%0.0f",self.m.red];

     self.lalGreen.text = [NSString stringWithFormat:@"红：%0.0f",self.m.green];

     self.lalBlue.text = [NSString stringWithFormat:@"红：%0.0f",self.m.blue];

     self.lalAlpha.text = [NSString stringWithFormat:@"透明度：%0.0f", - self.m.penAlpha];

     self.sliderRed.value = self.m.red;

     self.sliderGreen.value = self.m.green;

     self.sliderBlue.value = self.m.blue;

     self.sliderAlpha.value =  - self.m.penAlpha;

     self.colorView.backgroundColor = self.m.penColor;

 }

 - (IBAction)PenSliderValueChanged:(UISlider *)sender

 {

     self.lalPen.text = [NSString stringWithFormat:@"画笔宽度：%0.1lf",sender.value];

     self.m.penValue = sender.value;

 }

 当4slider改变时回调同一个方法；

 - (IBAction)ColorChanged:(UISlider *)sender {

     switch (sender.tag) {

         case :

             self.lalRed.text = [NSString stringWithFormat:@"红：%0.0f",sender.value];

             self.m.red = sender.value;

             break;

         case :

             self.lalGreen.text = [NSString stringWithFormat:@"绿：%0.0f",sender.value];

             self.m.green = sender.value;

             break;

         case :

             self.lalBlue.text = [NSString stringWithFormat:@"蓝：%0.0f",sender.value];

             self.m.blue = sender.value;

             break;

         case :

             self.lalAlpha.text = [NSString stringWithFormat:@"透明度：%0.1f",sender.value];

             self.m.penAlpha =  - sender.value;

             break;

         default:

             break;

     }

     self.colorView.backgroundColor = self.m.penColor;

 }

 @end

数据管理器：储存画笔样式

manager.h

 @interface manager : NSObject

 @property (nonatomic, assign) CGFloat penValue;

 @property (nonatomic, assign) CGFloat red;

 @property (nonatomic, assign) CGFloat green;

 @property (nonatomic, assign) CGFloat blue;

 @property (nonatomic, strong) UIColor * penColor;

 @property (nonatomic, assign) CGFloat penAlpha;

 + (instancetype)shared;

 @end

manager.m

 + (instancetype)shared

 {

     static manager * m = nil;

     static dispatch_once_t onceToken;

     dispatch_once(&onceToken, ^{

         m = [[manager alloc] init];

     });

     return m;

 }

 初始化颜色

 -(UIColor *)penColor

 {

     _penColor = [UIColor colorWithRed:self.red /  green:self.green/  blue:self.blue /  alpha: - self.penAlpha];

     return _penColor;

 }

 初始化画笔宽度

 -(CGFloat)penValue

 {

     if (!_penValue) {

         _penValue = 1.0;

     }

     return _penValue;

 }