iOS 画板的实现,具有颜色、线宽、橡皮、撤销和清屏功能


完成一个简单的画板,能够实现画板颜色和线宽的选择,以及橡皮功能,撤销前一步的操作,和清屏功能。
效果图:
画板gif


工程下载:github工程下载链接


主要应用MVC模式进行代码架构,每一部分的代码实现思路在各部分的代码前面。


Controller
控制器实现基本思路:
1、添加工具栏和画板
2、ToolView中block的定义,colorBlock,widthBlock就是设置drawView的color;eraseBlock就设置其lineWidth和lineColor的具体值;undoBlock,clearBlock调用DrawView的函数

#import "ViewController.h"
#import "ToolView.h"
#import "DrawView.h"

#define Zwidth [UIScreen mainScreen].bounds.size.width
#define Zheight [UIScreen mainScreen].bounds.size.height

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
//    工具栏的实现
    ToolView *topView = [[ToolView alloc] initWithFrame:CGRectMake(0, 20, Zwidth, 130)];
    topView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:topView];

//    画板的实现
    DrawView *drawView = [[DrawView alloc] initWithFrame:CGRectMake(0, 150, 375, Zheight-170)];
    drawView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:drawView];

//    BLOCK的实现
    topView.colorBlock = ^(UIColor *color){
        drawView.lineColor = color;
    };

     topView.widthBlock = ^(CGFloat width){
        drawView.lineWidth = width;
    };

    topView.eraserBlock = ^(void){
        drawView.lineWidth = 20;
        drawView.lineColor = [UIColor whiteColor];
    };

    topView.undoBlock = ^{
        [drawView undoAction];
    };

    topView.clearBlock = ^{
        [drawView clearAction];

    };
}

View

ToolView.h

工具栏实现的基本思路:
1、功能选择,颜色选择,线宽选择等,都是将不同选择的button添加到view上面,并且添加动作
2、为了更高效循环添加button,动作响应根据tag来判断是哪个button,从而做出不同的响应
3、功能选择动作响应:不同的button响应不同的block
4、颜色和线宽响应:不同的button响应后设置颜色/线宽
5、添加一个背景图片,当选择某一个button时,这个图片也会移动到该button上方(block来实现)

#import <UIKit/UIKit.h>

typedef void (^ColorSelectBlock)(UIColor *color);
typedef void (^WidthSelectBlock)(CGFloat width);
typedef void (^OtherSelectBlock)(void);

@interface ToolView : UIView
{
    UIView *colorView;
    UIView *widthView;

    NSDictionary *_colorDic;    //可以用数组来实现

    UIImageView *bgImageView;
    UIImageView *widthBgImageView;
    UIImageView *colorBgImageView;
}

@property (nonatomic,copy) ColorSelectBlock colorBlock;
@property (nonatomic,copy) WidthSelectBlock widthBlock;
@property (nonatomic,copy) OtherSelectBlock eraserBlock;
@property (<
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值