IOS 学习笔记---一个最基本的画板与可换颜色的画板(纯代码实现)

创建一个以OC为开发语言的IOS工程，新建一个类继承与UIView

重写一下方法并实现

//在.h文件里面声明两个实例变量
{
    CGPoint _startpoint;//记录点击滑动时的位置
    NSMutableArray* _marray;//记录滑动时的位置
    
}
//在.m文件里面

//重写初始化方法
-(id)initWithFrame:(CGRect)frame{
  if(self==[super initWithFrame:frame]){
       self.backgroundColor=[UIColor lightGrayColor];//设置背景初始化为灰色
       _marray=[NSMutableArray new];

   }
       return self;
}
//触碰开始方法
-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
       UITouch* touch = [touches anyObject];//获取到点击时任意的一个值
       _startpoint = [touch locationInView:self];//获取点击时的位置
       NSMutableArray *pointArray = [NSMutableArray new];//
       //转换为对象
       NSValue *value = [NSValue valueWithCGPoint:_startpoint];
       //将存有点击位置的value存到新建的数组中
       [pointArray addObject:value];

       [_marray addObject:pointArray];

}
//鼠标滑动时的方法
-(void)touchesMoved:(NSSet*)touches withEvent:(UIEvent* )event
{
       //跟开始方法差不多，只是会获取_marray数组最后一个,往里面添加获取到得位置
       NSMutableArray *pointArray = [_marray lastObject];
       
       UITouch* touch=[touches anyObject];
       CGPoint currentPoint = [touch locationInView:self];
       
       NSValue* value=[NSValue valueWithCGPoint:currentPoint];
       [pointArray addObject:value];
    

       //这个方法是和绘画方法呼应
       [self setNeedsDisplay];//表示边绘边画

}
//鼠标结束时的方法
-(void)touchesEnded:(NSSet*) touches withEvent:(UIEvent*)event
{
}

//绘画方法
-(void)drawRect:(CGRect)rect
{
       CGContextRef cgrf = UIGraphicsGetCurrentContext();//设置笔画
       //笔画的粗细
       CGContextSetLineWidth(cgrf,2.0f);
       //笔画的颜色
       CGContextSetStrokeColorWithColor(cgrf,[UIColor yellowColor].CGColor);
       for (NSMutableArray* pointArr in _marray) {
        for (int i=0; i<pointArr.count-1; i++) {
            NSValue* value=pointArr[i];
            CGPoint apoint=[value CGPointValue];
            //将画笔移动到指定的点
            CGContextMoveToPoint(cgrf, apoint.x, apoint.y);
            
            NSValue* nextvalue=pointArr[i+1];
            CGPoint nextapoint=[nextvalue CGPointValue];
            // 将画笔从现在的点与给定的点(针对函数的参数而言)之间连线
            CGContextAddLineToPoint(cgrf, nextapoint.x, nextapoint.y);
        }
    }
    CGContextStrokePath(cgrf);
    
}

注意在ViewController.m里面实现它

导入#import"Draw.h"

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view=[[Draw alloc]initWithFrame:[UIScreen mainScreen].bounds];
}

本人创建的是Draw,只需要换自定义的文件名就可以

就这样一个简单的画板就完成了

更复杂的可以在画板上添加控件，换画笔颜色

 

下面是可变颜色的画板 ，只是在基本画板上修改一点而已，框架不变

#import "Draw.h"
@interface Draw()
{
    //记录点击开始位置
    CGPoint _startpoint;
    //创建外层数组，用于记录线条
    NSMutableArray * _lineArray;
    //颜色
    UIColor* _color;
}

@end
@implementation Draw

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor=[UIColor lightGrayColor];
        _lineArray=[[NSMutableArray alloc]initWithCapacity:7];
        _color=[UIColor blackColor];
        
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        btn.frame = CGRectMake(160, 570, 60, 40);
        [btn setTitle:@"撤销" forState:UIControlStateNormal];
        [btn addTarget:self action:@selector(undoAct:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:btn];
        
        
        NSArray* gesArr=@[@"白",@"蓝",@"黄",@"绿",@"橙",@"黑"];
        UISegmentedControl *seg = [[UISegmentedControl alloc]initWithItems:gesArr];
        seg.frame=CGRectMake(15, 627, 350, 38);
        seg.selectedSegmentIndex=5;
        [seg addTarget:self action:@selector(seg:) forControlEvents:UIControlEventValueChanged];
        [self addSubview:seg];
    }
    return self;
}
-(void)undoAct:(UIButton*)btn{
    [_lineArray removeLastObject];
    [self setNeedsDisplay];
}
-(void)seg:(UISegmentedControl* )segmen{
    switch (segmen.selectedSegmentIndex) {
        case 0:
            _color = [UIColor whiteColor];
            break;
        case 1:
            _color = [UIColor blueColor];
            break;
        case 2:
            _color = [UIColor yellowColor];
            break;
        case 3:
            _color = [UIColor greenColor];
            break;
        case 4:
            _color = [UIColor orangeColor];
            break;
        case 5:
            _color = [UIColor blackColor];
            break;
        default:
            break;
    }
}
//触碰开始方法
-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
    UITouch* touch = [touches anyObject];//获取到点击时任意的一个值
    _startpoint = [touch locationInView:self];//获取点击时的位置
    NSMutableArray *pointArray = [NSMutableArray new];//
    //转换为对象
    NSValue *value = [NSValue valueWithCGPoint:_startpoint];
    //将存有点击位置的value存到新建的数组中
    [pointArray addObject:_color];
    [pointArray addObject:value];
    
    
    [_lineArray addObject:pointArray];
    
}
//鼠标滑动时的方法
-(void)touchesMoved:(NSSet*)touches withEvent:(UIEvent* )event
{
    //跟开始方法差不多，只是会获取_marray数组最后一个,往里面添加获取到得位置
    NSMutableArray *pointArray = [_lineArray lastObject];
    
    UITouch* touch=[touches anyObject];
    CGPoint currentPoint = [touch locationInView:self];
    
    NSValue* value=[NSValue valueWithCGPoint:currentPoint];
    [pointArray addObject:value];
    
    
    //这个方法是和绘画方法呼应
    [self setNeedsDisplay];//表示边绘边画
    
}
//鼠标结束时的方法
-(void)touchesEnded:(NSSet*) touches withEvent:(UIEvent*)event
{
    NSArray* pointarr=[_lineArray lastObject];
    if (pointarr.count==2) {
        [_lineArray removeLastObject];
        
    }
}

//绘画方法
-(void)drawRect:(CGRect)rect
{
    CGContextRef cgrf = UIGraphicsGetCurrentContext();//设置笔画
    //笔画的粗细
    CGContextSetLineWidth(cgrf,2.0f);
    //笔画的颜色
//
    for (NSMutableArray* pointArr in _lineArray) {
        UIColor* lineColor=pointArr[0];
        CGContextSetStrokeColorWithColor(cgrf,lineColor.CGColor);
        for (int i=1; i<pointArr.count-1; i++) {
            NSValue* value=pointArr[i];
            CGPoint apoint=[value CGPointValue];
            //将画笔移动到指定的点
            CGContextMoveToPoint(cgrf, apoint.x, apoint.y);
            
            NSValue* nextvalue=pointArr[i+1];
            CGPoint nextapoint=[nextvalue CGPointValue];
            // 将画笔从现在的点与给定的点(针对函数的参数而言)之间连线
            CGContextAddLineToPoint(cgrf, nextapoint.x, nextapoint.y);
        }
          CGContextStrokePath(cgrf);
    }
  
    
}


@end