画板 - 代码天地

自己学习绘图过程中写的一个小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

为图片实现打马赛克功能，博文地址：

http://mp.blog.csdn.net/mdeditor/79461592

画板

猜你喜欢