ios绘图demo,做一个涂鸦板(上)

ios绘图demo,做一个涂鸦板(上)

之前一篇文字写了ios绘图基础，这篇文章，使用之前写的绘图基础，做一个涂鸦板。并把每一步完成都结果都单独保存一个文件，加上v+版本号

ios绘图基础

ios绘图demo,做一个涂鸦板(上)

• 1完成一个最基本的涂鸦板
• 2给涂鸦板加上颜色选择功能，和笔触粗细功能

ios绘图demo,做一个涂鸦板(下)

• 3画贝塞尔曲线

ios绘图demo,做一个涂鸦板(上) 的效果图：

代码下载:github库，对应此文章的目录是paint ,点击跳转代码下载地址

1:完成一个最基本的涂鸦板

下载代码后见文件PaintViewV01,看效果请在ViewController中找到PaintView，换成PaintView01

步骤和原理

• 1：重写uiview的 init、initWithFrame方法，主要是添加一个白色的背景色
• 2：重写touchesBegan、touchesMoved、touchesEnded，作用是接收屏幕触摸的坐标，手指接触uiview后会依次执行这三个方法。 其中重写touchesBegan和重写touchesEnded只在开始和结束执行一次，而手指在移动的过程中，会多次执行touchesMoved
• 3：重写drawRect方法，根据用户手指的移动，画出涂鸦

代码（关键步骤都已经注释，应该都能看明白吧）

//
// PaintView.m
// Paint
//
// Created by 刘彦玮 on 15/7/26.
// Copyright (c) 2015年 刘彦玮. All rights reserved.
//

#import "PaintViewV01.h"




@implementation PaintViewV01{

    //画的线路径的集合，内部是NSMutableArray类型
    NSMutableArray *paths;
}

-(instancetype)init{
    self = [super init];
    if (self) {
       //初始化uiview的样式
        [self paintViewInit];
    }
    return  self;
}
-(instancetype)initWithFrame:(CGRect)frame{
        self = [super initWithFrame:frame];
        if (self) {
            //初始化uiview的样式
            [self paintViewInit];
        }
        return  self;
}

//初始化paintViewInit样式和数据
-(void)paintViewInit{
    //添加背景色
    self.backgroundColor = [UIColor whiteColor];
    //初始化路径集合
    paths = [[NSMutableArray alloc]init];
}

-(void)drawRect:(CGRect)rect{
    //必须调用父类drawRect方法，否则 UIGraphicsGetCurrentContext()获取不到context
    [super drawRect:rect];
    //获取ctx
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //渲染所有路径
    for (int i=0; i<paths.count; i++) {
        NSMutableArray *pathPoints = [paths objectAtIndex:i];
        CGMutablePathRef path = CGPathCreateMutable();
        for (int j=0; j<pathPoints.count; j++) {
            CGPoint point = [[pathPoints objectAtIndex:j]CGPointValue] ;
            if (j==0) {
                CGPathMoveToPoint(path, &CGAffineTransformIdentity, point.x,point.y);
            }else{
                CGPathAddLineToPoint(path, &CGAffineTransformIdentity, point.x, point.y);
            }
        }
        //路径添加到ct
        CGContextAddPath(ctx, path);
        //描边
        CGContextStrokePath(ctx);
    }
}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    //创建一个路径，放到paths里面
    NSMutableArray *path = [[NSMutableArray alloc]init];
    [paths addObject:path];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    //获取当前路径
    NSMutableArray *path = [paths lastObject];
    //获取当前点
    CGPoint movePoint = [[touches anyObject]locationInView:self];
    NSLog(@"touchesMoved x:%f,y:%f",movePoint.x,movePoint.y);
    //CGPint要通过NSValue封装一次才能放入NSArray
    [path addObject:[NSValue valueWithCGPoint:movePoint]];
    //通知重新渲染界面，这个方法会重新调用UIView的drawRect:(CGRect)rect方法
    [self setNeedsDisplay];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{

}

@end

1完成后，就可以画画了，不过只能画固定粗细的黑色笔画，下面，我我们增加彩色笔画和控制粗细的功能

2:给涂鸦板加上颜色和笔触粗细选择的功能

下载代码后见文件PaintViewV02,看效果请在ViewController中找到PaintView，换成PaintView02

步骤

• 1增加一个数据对象，封装笔触pathPoint、笔触颜色、笔触粗细
• 2修改变量名称，增加变量
• 3修改界面，添加色板，和笔触粗细选择器
• 4修改原来的touchesBegan,touchesMoved方法，将选择的颜色数据和粗细数据封装
• 5修改drawRect方法

1增加一个数据对象，封装笔触pathPoint、笔触颜色、笔触粗细

//
// PaintStep.h
// Paint
//
// Created by 刘彦玮 on 15/7/26.
// Copyright (c) 2015年 刘彦玮. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface PaintStep : NSObject{

@public
    //路径
    NSMutableArray *pathPoints;
    //颜色
    CGColorRef color;
    //笔画粗细
    float strokeWidth;
}

@end


//
// PaintStep.m
// Paint
//
// Created by 刘彦玮 on 15/7/26.
// Copyright (c) 2015年 刘彦玮. All rights reserved.
//

#import "PaintStep.h"

@implementation PaintStep

@end

2修改变量名称，增加变量，

paths 改名为 paintSteps,并增加currColor和slider两个变量

//屏幕的宽高，做自适应用的
#define width [UIScreen mainScreen].bounds.size.width
#define height [UIScreen mainScreen].bounds.size.height


@implementation PaintViewV02{

    //画的线路径的集合，内部是NSMutableArray类型
    NSMutableArray *paintSteps;
    //当前选中的颜色
    UIColor *currColor;
    //当前笔触粗细选择器
    UISlider *slider;

}

3修改界面，添加色板，和笔触粗细选择器

(void)paintViewInit 方法增加对两个方法的调用

-(void)paintViewInit 方法增加

    ....

    //创建色板
    [self createColorBord];

    //创建笔触粗细选择器
    [self createStrokeWidthSlider];
}

创建色板和创建笔触粗细选择器的实现

//创建色板
-(void)createColorBord{
    //默认当前笔触颜色是黑色
    currColor = [UIColor blackColor];
    //色板的view
    UIView *colorBoardView = [[UIView alloc]initWithFrame:CGRectMake(0, 20, width, 20)];
    [self addSubview:colorBoardView];
    //色板样式
    colorBoardView.layer.borderWidth = 1;
    colorBoardView.layer.borderColor = [UIColor blackColor].CGColor;

    //创建每个色块
    NSArray *colors = [NSArray arrayWithObjects:
                       [UIColor blackColor],[UIColor redColor],[UIColor blueColor],
                       [UIColor greenColor],[UIColor yellowColor],[UIColor brownColor],
                       [UIColor orangeColor],[UIColor whiteColor],[UIColor orangeColor],
                       [UIColor purpleColor],[UIColor cyanColor],[UIColor lightGrayColor], nil];
    for (int i =0; i<colors.count; i++) {
        UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake((width/colors.count)*i, 0, width/colors.count, 20)];
        [colorBoardView addSubview:btn];
        [btn setBackgroundColor:colors[i]];
        [btn addTarget:self action:@selector(changeColor:) forControlEvents:UIControlEventTouchUpInside];
    }

}

//切换颜色
-(void)changeColor:(id)target{
    UIButton *btn = (UIButton *)target;
    currColor = [btn backgroundColor];
}

//创建笔触粗细选择器
-(void)createStrokeWidthSlider{
    slider = [[UISlider alloc]initWithFrame:CGRectMake(0, 50, width, 20)];
    slider.maximumValue = 20;
    slider.minimumValue = 1;
    [self addSubview:slider];
}

4修改原来的touchesBegan,touchesMoved方法，将选择的颜色数据和粗细数据封装

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

    PaintStep *paintStep = [[PaintStep alloc]init];
    paintStep->color = currColor.CGColor;
    paintStep->pathPoints =  [[NSMutableArray alloc]init];
    paintStep->strokeWidth = slider.value;
    [paintSteps addObject:paintStep];
}


-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

    //获取当前路径
    PaintStep *step = [paintSteps lastObject];
    NSMutableArray *pathPoints = step->pathPoints;

    ....
}

5：修改drawRect方法

-(void)drawRect:(CGRect)rect{

    ....

    //渲染所有路径
    for (int i=0; i<paintSteps.count; i++) {
        ....

        //设置path 样式
        CGContextSetStrokeColorWithColor(ctx, step->color);
        CGContextSetLineWidth(ctx, step->strokeWidth);
        //路径添加到ct
        CGContextAddPath(ctx, path);

        ....
    }
}

完成后，我们的画板就可以画出彩色的笔画，控制粗细了。之后，我会继续给画板增加一些功能，并把方法写出来。

| ios绘图demo,做一个涂鸦板(上) | 完成后的效果图：