完成一个简单的画板,能够实现画板颜色和线宽的选择,以及橡皮功能,撤销前一步的操作,和清屏功能。
效果图:
工程下载: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 (<