iOS一个简单画板的实现

今天用OC语言来做实现一个简单的画板功能. 做起来很简单就不啰嗦了...代码呈上:

首先,我们创建一个继承自UIView的类在这里RootView:
声明一个数组,用来保存所有的连线每一个划过的每一条线都是数组里面的一个元素

@property(nonatomic,retain)NSMutableArray *lineArray;

初始化一个撤销按钮点击按钮撤销最后一次划线

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.lineArray = [NSMutableArray arrayWithCapacity:1];
        
        UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
        button.frame = CGRectMake(20, 600, 100, 40);
        [button setTitle:@"返回" forState:UIControlStateNormal];
        [button addTarget:self action:@selector(buttonDidClicked:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:button];
    }
    return self;
}
-(void)buttonDidClicked:(UIButton *)sender{
    [_lineArray removeLastObject];
    [self setNeedsDisplay];
}

其实我们可以这样理解,我们在落笔的那一刻,是提条线的开始而在移动的过程当中进行连线:

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    NSMutableArray *pointArray = [NSMutableArray arrayWithCapacity:1];
    //吧存放点的数组放进一个大的数组中 相当于用一个大的数组来存放所有用点来组成的线
    [_lineArray addObject:pointArray];
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    NSLog(@"point = %@",NSStringFromCGPoint(point));
    NSMutableArray *pointArray = [_lineArray lastObject];
    NSValue *pointValue = [NSValue valueWithCGPoint:point];
    [pointArray addObject:pointValue];
    //重绘界面
    [self setNeedsDisplay];
}

涂鸦的方法

//涂鸦的方法
-(void)drawRect:(CGRect)rect{
    
    //得到上下文  1 在drawrect拿到上下文 2 通过一个Image图片拿到上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //设置画笔的颜色
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    //设置画笔的粗细
    CGContextSetLineWidth(context, 2.0);
    
    for (int i = 0; i < [_lineArray count]; i++) {
        NSMutableArray *pointArray = [_lineArray objectAtIndex:i];
        
        for (int j = 0; j <(int)pointArray.count - 1; j++) {
            //拿出小数组之中的两个点
            NSValue *firstPointValue = [pointArray objectAtIndex:j];
            NSValue *secondPointValue = [pointArray objectAtIndex:j+1];
            CGPoint firstPoint = [firstPointValue CGPointValue];
            CGPoint seconePoint = [secondPointValue CGPointValue];
            //把笔触移动一个点
            CGContextMoveToPoint(context, firstPoint.x, firstPoint.y);
            //笔触和另一个点形成一个路径
            CGContextAddLineToPoint(context, seconePoint.x, seconePoint.y);
        }
    }
    //真正绘制
    CGContextStrokePath(context);
}

运行一个程序我们可以看到如下结果 ,此时一个简单的画板功能就实现了,我们还可以添加其他一些信息,比如将信息保存到相册在这里不再提及,大家自己摸索

全部频道

iOS一个简单画板的实现