画板

来源:互联网 发布:淘宝店铺主营项目 编辑:程序博客网 时间:2024/04/29 10:33

自己学习绘图过程中写的一个小demo,记录一下:

总结了两种方法来实现demo功能:

第1种方法:先用小数组存放所有的移动手指获取到的点,每个小数组都是一条线,然后创建一个大数组存放小数组,将所有的线段放到大数组中,然后遍历绘制出线段 

先自定义一个view,继承自UIView

#import "YJ_View.h"@interface YJ_View ()/** *  定义一个大数组(大数组中保存小数组, 每一个小数组保存一条直线所有的点) */@property (nonatomic, strong) NSMutableArray *totalPoints;@end@implementation YJ_View- (NSMutableArray *)totalPoints{    if (_totalPoints == nil) {        _totalPoints = [NSMutableArray array];    }    return _totalPoints;}- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{//    NSLog(@"touchesBegan");        // 1.获取手指对应UITouch对象    UITouch *touch = [touches anyObject];    // 2.通过UITouch对象获取手指触摸的位置    CGPoint startPoint = [touch locationInView:touch.view];        // 3.创建一个小数组,用于保存当前路径所有的点    NSMutableArray *subPoints = [NSMutableArray array];    // 4.将手指触摸的起点存储到小数组中    [subPoints addObject:[NSValue valueWithCGPoint:startPoint]];    // 5.将小数组存储到大数组中    [self.totalPoints addObject:subPoints];}- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{    // 1.获取手指对应UITouch对象    UITouch *touch = [touches anyObject];    // 2.通过UITouch对象获取手指触摸的位置    CGPoint movePoint = [touch locationInView:touch.view];    // 3.从大数组中取出当前路径对应的小数组    NSMutableArray *subPoints = [self.totalPoints lastObject];    // 4.将手指移动时触摸的点存储到小数组中    [subPoints addObject:[NSValue valueWithCGPoint:movePoint]];         // 5.调用drawRect方法重回视图    [self setNeedsDisplay];}- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{    // 1.获取手指对应UITouch对象    UITouch *touch = [touches anyObject];    // 2.通过UITouch对象获取手指触摸的位置    CGPoint endPoint = [touch locationInView:touch.view];    // 3.从大数组中取出当前路径对应的小数组    NSMutableArray *subPoints = [self.totalPoints lastObject];    // 4.将手指移动时触摸的点存储到小数组中    [subPoints addObject:[NSValue valueWithCGPoint:endPoint]];    // 5.调用drawRect方法重绘视图    [self setNeedsDisplay];}// 画线- (void)drawRect:(CGRect)rect{       // 1.获取上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    // 遍历大数组,取出所有的小数组(每一个小数组代表一条线段)    for (NSMutableArray *subPointArray in self.totalPoints) {        // 遍历小数组, 取出小数组中所有的点        for (int index = 0; index < subPointArray.count; index++) {            // 1.取出小数组中的每一个点             CGPoint point = [subPointArray[index] CGPointValue];            // 2.绘制线段            if (0 == index) {                // 2.1. 设置线段的起点                CGContextMoveToPoint(ctx, point.x, point.y);            }else            {                // 2.2.设置线段的终点                CGContextAddLineToPoint(ctx, point.x, point.y);            }        }    }        CGContextSetLineCap(ctx, kCGLineCapRound);    CGContextSetLineJoin(ctx, kCGLineJoinRound);    CGContextSetLineWidth(ctx, 10);        // 3.渲染    CGContextStrokePath(ctx);    }- (void)clearView{    [self.totalPoints removeAllObjects];    [self setNeedsDisplay];}- (void)backView{    [self.totalPoints removeLastObject];    [self setNeedsDisplay];}@end










第2种方法:用path来绘制线段,每个path都是一个线段,然后创建一个数组存放所有的path,最终遍历绘制出所有线段(这才是主要的方法)

#import "YJ_View2.h"@interface YJ_View2 ()@property (nonatomic, strong) NSMutableArray *paths;@end@implementation YJ_View2- (NSMutableArray *)paths{    if (_paths == nil) {        _paths = [NSMutableArray array];    }    return _paths;}// 开始触摸- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{    // 1.获取手指对应UITouch对象    UITouch *touch = [touches anyObject];    // 2.通过UITouch对象获取手指触摸的位置    CGPoint startPoint = [touch locationInView:touch.view];        // 3.当用户手指按下的时候创建一条路径    UIBezierPath *path = [UIBezierPath bezierPath];    // 3.1设置路径的相关属性    [path setLineJoinStyle:kCGLineJoinRound];    [path setLineCapStyle:kCGLineCapRound];    [path setLineWidth:10];        // 4.设置当前路径的起点    [path moveToPoint:startPoint];    // 5.将路径添加到数组中    [self.paths addObject:path];    }// 移动- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{    // 1.获取手指对应UITouch对象    UITouch *touch = [touches anyObject];    // 2.通过UITouch对象获取手指触摸的位置    CGPoint movePoint = [touch locationInView:touch.view];        // 3.取出当前的path    UIBezierPath *currentPaht = [self.paths lastObject];    // 4.设置当前路径的终点    [currentPaht addLineToPoint:movePoint];        // 6.调用drawRect方法重回视图    [self setNeedsDisplay];}// 离开view(停止触摸)- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{        [self touchesMoved:touches withEvent:event];    /*    // 1.获取手指对应UITouch对象    UITouch *touch = [touches anyObject];    // 2.通过UITouch对象获取手指触摸的位置    CGPoint endPoint = [touch locationInView:touch.view];        // 3.取出当前的path    UIBezierPath *currentPaht = [self.paths lastObject];    // 4.设置当前路径的终点    [currentPaht addLineToPoint:endPoint];    // 6.调用drawRect方法重回视图    [self setNeedsDisplay];     */     }// 画线- (void)drawRect:(CGRect)rect{        [[UIColor redColor] set];    // 边路数组绘制所有的线段    for (UIBezierPath *path in self.paths) {        [path stroke];    }    }- (void)clearView{    [self.paths removeAllObjects];    [self setNeedsDisplay];}- (void)backView{    [self.paths removeLastObject];    [self setNeedsDisplay];}@end





0 0
原创粉丝点击