iOS绘画板

今天给大家讲讲如何用代码实现绘图功能,虽然是很简陋的绘图功能,但也值得大家一看.先看看效果图吧.

从这副图中大家可以看出我在艺术方面的造诣还是挺高的,怎么实现的呢,其实也不难,直接上代码吧.

自定义的TouchLineView

#import "TouchLineView.h"
@implementation TouchLineView
{
    NSMutableArray *strokes;
    NSMutableDictionary *touchPaths;
}

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self.backgroundColor = [UIColor whiteColor];
        self.userInteractionEnabled = YES;//打开用户交互
        strokes = [NSMutableArray array];
        touchPaths = [NSMutableDictionary dictionary];
    }
    return self;
}

- (void)clear
{
    [strokes removeAllObjects];//移除所有对象
    [self setNeedsDisplay];
}
//触摸开始时的方法
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    for (UITouch *touch in touches)
    {
        NSString *key = [NSString stringWithFormat:@"%d", (int) touch];
        CGPoint point = [touch locationInView:self];//触摸点的位置
        
        UIBezierPath *path = [UIBezierPath bezierPath];//UIBezierPath类允许您定义一个路径组成的直线和曲线段和渲染路径在您的自定义视图
        path.lineWidth =  4;//线宽
        path.lineCapStyle = kCGLineCapRound;//线条样式
        [path moveToPoint:point];//当前点移动到指定的位置
        
        [touchPaths setObject:path forKey:key];//将path保存在字典里
    }
}
//手指移动时的方法
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    for (UITouch *touch in touches)
    {
        NSString *key = [NSString stringWithFormat:@"%d", (int) touch];
        UIBezierPath *path = [touchPaths objectForKey:key];
        if (!path) break;
        
        CGPoint point = [touch locationInView:self];
        [path addLineToPoint:point];//将移动的点添加到path里
    }
    [self setNeedsDisplay];//标志着当前view的整个边界矩形需要重绘
}
//手指离开屏幕时的方法
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    for (UITouch *touch in touches)
    {
        NSString *key = [NSString stringWithFormat:@"%d", (int) touch];
        UIBezierPath *path = [touchPaths objectForKey:key];
        if (path) [strokes addObject:path];
        [touchPaths removeObjectForKey:key];//当手指离开屏幕让移除touchPaths里的值,只剩strokes,这时灰线变成黑线
    }
    [self setNeedsDisplay];
}

//传入矩形内的线条。
- (void)drawRect:(CGRect)rect
{
    //手指离开屏幕时线条的颜色
    [[UIColor blackColor] set];
    for (UIBezierPath *path in strokes)
        [path stroke];//画一条线沿接收器使用当前绘图属性的路径
    
    //手指在屏幕上移动时屏幕的颜色
    [[UIColor grayColor] set];
    for (UIBezierPath *path in [touchPaths allValues])
    {
        [path stroke];
    }
}

@end

ViewController

#import "XMHDrawViewController.h"
#import "TouchLineView.h"
@interface XMHDrawViewController ()
@property(nonatomic, strong)TouchLineView *touchlineView;
@end

@implementation XMHDrawViewController

- (void)loadView
{
    [super loadView];
    _touchlineView = [[TouchLineView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [self.view setAutoresizingMask:UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth];
    self.view.backgroundColor = [UIColor whiteColor];
      self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Clear" style:UIBarButtonItemStylePlain target:self action:@selector(clear)];
    [self.view addSubview:_touchlineView];
}

- (void)clear
{
    [_touchlineView clear];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

这样运行就可以了,大家去画一画试试吧.祝大家开心