转载请注明原创 secret_t
先来说下文章的目的，最近项目需求做多手指划线并显示功能，网上扒了好多资料，只是单手指的划线，所以就写写呗。。。
首先说说项目采用的模式：MVC模式。。。不多说，上代码。
创建两个类:DrawLineInfo DrawLineView
DrawLineInfo.h
@interface DrawLineInfo : UIView
@property (nonatomic, strong) NSMutableArray*points;//坐标集合
@property (nonatomic, strong) UIColor *lineColor;//线条颜色
@property (nonatomic, assign) CGFloat lineWidth;//线条宽
DrawLineInfo.m
- (instancetype)init {
if (self = [super init]) {
_points = [[NSMutableArray alloc] initWithCapacity:10];
}
return self;
}
model写完了，接下来就是view的实现了。。。上代码
DrawLineView.h
@interface DrawLineView : UIView
{
//存储手指
NSMutableArray *_touches;
}
@property (nonatomic, strong) NSMutableArray *allDrawLineInfos;//线条的所有信息，坐标、颜色、宽度
@property (nonatomic, strong) UIColor *currentLineColor;//当前线条的颜色，可设置
@property (nonatomic, assign) CGFloat currentLineWidth;//当前线条的宽度，可设置
/**
清除所有线
*/
- (void)cleanAllDrawLineBySelf;
DrawLineView.m实现 首先drawrect实现
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
_allDrawLineInfos = [[NSMutableArray alloc] initWithCapacity:10];
_touches = [[NSMutableArray alloc] initWithCapacity:10];
_currentLineColor = [UIColor redColor];
_currentLineWidth = 1.0f;
self.backgroundColor = [UIColor whiteColor];
}
return self;
}
- (void)drawRect:(CGRect)rect {
// Drawing code
CGContextRef context=UIGraphicsGetCurrentContext();
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineJoin(context, kCGLineJoinRound);
if (_allDrawLineInfos.count > 0) {
for (int i = 0; i < self.allDrawLineInfos.count; i++) {
CGContextBeginPath(context);
DrawLineInfo *info = self.allDrawLineInfos[i];
CGPoint startPoint=[[info.points objectAtIndex:0] CGPointValue];
CGContextMoveToPoint(context, startPoint.x, startPoint.y);
if (info.points.count>1) {
for (int j=0; j<[info.points count]-1; j++) {
CGPoint endPoint=[[info.points objectAtIndex:j+1] CGPointValue];
CGContextAddLineToPoint(context, endPoint.x,endPoint.y);
}
}else {
CGContextAddLineToPoint(context, startPoint.x,startPoint.y);
}
CGContextSetStrokeColorWithColor(context, info.lineColor.CGColor);
CGContextSetLineWidth(context, info.lineWidth);
CGContextStrokePath(context);
}
}
}
接下来- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event {
for (UITouch *t in [[event allTouches] allObjects]) {
[self drawLineTouchBeganWithTouch:t];
}
[self setNeedsDisplay];
}
/**
手指触摸开始记录坐标、线条信息
@param touch 手指
*/
- (void)drawLineTouchBeganWithTouch:(UITouch *)touch {
CGPoint p = [touch locationInView:self];
DrawLineInfo *info = [DrawLineInfo shareDrawLineInfo];
info.lineColor = self.currentLineColor;
info.lineWidth = self.currentLineWidth;
[info.points addObject:[NSValue valueWithCGPoint:p]];
[self.allDrawLineInfos addObject:info];
// 添加手指 用来判断移动过程中是否有新手指加入
[_touches addObject:touch];
}
然后- (void)touchesMoved:(NSSet*)touches withEvent:(UIEvent *)event
- (void)touchesMoved:(NSSet*)touches withEvent:(UIEvent *)event {
for (UITouch *t in [[event allTouches] allObjects]) {
// 移动过程中是否还有手指触摸，有就加进来
if (![_touches containsObject:t]) {
[self drawLineTouchBeganWithTouch:t];
}
}
for (int i = 0; i<_touches.count; i++) {
UITouch *t = _touches[i];
[self drawLineTouchMoveWithTouch:t index:i];
}
[self setNeedsDisplay];
}
/**
手指移动过程中将经过的点添加进去
@param touch 手指
@param index 对应手指下标
*/
- (void)drawLineTouchMoveWithTouch:(UITouch *)touch index:(NSInteger)index{
CGPoint p = [touch locationInView:self];
DrawLineInfo *info = [self.allDrawLineInfos objectAtIndex:index];
[info.points addObject:[NSValue valueWithCGPoint:p]];
}
ok，到这就基本完成了，实现多手指划线的功能
最后附上清除所有线条的方法
/**
清除所有线
*/
- (void)cleanAllDrawLineBySelf {
if (_allDrawLineInfos.count > 0) {
[self.allDrawLineInfos removeAllObjects];
[_touches removeAllObjects];
}
[self setNeedsDisplay];
}
网友评论