响应者对象:继承了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];

效果图:

iOS_Quartz2D之涂鸦板-LMLPHP      iOS_Quartz2D之涂鸦板-LMLPHP   iOS_Quartz2D之涂鸦板-LMLPHP画笔笔头根据画笔宽度进行改变:iOS_Quartz2D之涂鸦板-LMLPHPiOS_Quartz2D之涂鸦板-LMLPHP

原理:利用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;
}
05-11 17:27