iOS －－制作画板 －－1
制作画板
1，搭建界面
创建一个继承于UIView 的视图，就是画板视图,并导入到视图控制器来创建
再自定义一个工具栏的子视图，同样导入到视图控制器中使用
#import "ViewController.h"
#import "DrawView.h"
#define kwidth [UIScreen mainScreen].bounds.size.width
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//创建画板视图
DrawView *drawView = [[DrawView alloc]initWithFrame:[UIScreen mainScreen].bounds];
drawView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:drawView];
//创建灰色的工具栏视图
ToolView *toolView = [[ToolView alloc]initWithFrame:CGRectMake(0, 20, kwidth, 110)];
toolView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:toolView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
自定义工具栏视图
定义的全局变量
SelectButton *_LastButton;
NSArray *_lineArray;
UIView *_lineView;
UIView *_colorView;
#import "ToolView.h"
#import "SelectButton.h"
#define kwidth [UIScreen mainScreen].bounds.size.width
@implementation ToolView
-(instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
[self creatSelectButton];
[self creatColorView];
[self creatLineWidthView];
}
return self;
}
//创建线宽的工具视图
- (void)creatLineWidthView
{
_lineView = [[UIView alloc]initWithFrame:CGRectMake(0, 40, kwidth, 65)];
[self addSubview:_lineView];
_lineArray = @[@1,@3,@5,@8,@10,@15,@20];
for (int i = 0; i < 7; i ++)
{
UIButton *lineButton = [UIButton buttonWithType:UIButtonTypeCustom];
lineButton.frame = CGRectMake(i * (kwidth/7+8), 0, kwidth/7, 60);
lineButton.tag = 200 + i;
NSString *name = [NSString stringWithFormat:@"%@点",_lineArray[i]];
[lineButton setTitle:name forState:UIControlStateNormal];
[lineButton addTarget:self action:@selector(lineButtonAction:) forControlEvents:UIControlEventTouchUpInside];
lineButton.tag = i;
[_lineView addSubview:lineButton];
_lineView.hidden = YES;
}
}
//创建颜色的工具视图
- (void)creatColorView
{
_colorView = [[UIView alloc]initWithFrame:CGRectMake(0, 40, kwidth, 65)];
[self addSubview:_colorView];
NSArray *colorArray = @[[UIColor darkGrayColor],[UIColor redColor],[UIColor greenColor],[UIColor blueColor],[UIColor yellowColor],[UIColor orangeColor],[UIColor purpleColor],[UIColor brownColor],[UIColor blackColor],[UIColor whiteColor]];
for (int i = 0; i < 9; i ++)
{
UIButton *colorButton = [UIButton buttonWithType:UIButtonTypeCustom];
colorButton.frame = CGRectMake(i * (kwidth/10+3), 0, kwidth/10, 60);
colorButton.tag = 100 + i;
colorButton.backgroundColor = colorArray[i];
[colorButton addTarget:self action:@selector(colorButtonAction:) forControlEvents:UIControlEventTouchUpInside];
[_colorView addSubview:colorButton];
_colorView.hidden = YES;
}
}
自定义上面的5个按钮（颜色，线宽，橡皮，撤销，清屏）
定义一个继承于UIControl的按钮
在他的drawRect方法中将字画上去
开放出三个属性
@property(nonatomic,strong)UIFont *font;//字体 @property(nonatomic,assign)BOOL isSelected;//是否被点击的开关 @property(nonatomic,copy)NSString *title;//名称
初始化属性并妇协set方法
-(instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
//设置默认值
_title = @"这是一个字符串";
_isSelected = NO;
_font = [UIFont systemFontOfSize:17];
}
return self;
}
-(void)setFont:(UIFont *)font
{
_font = font;
[self setNeedsDisplay];
}
- (void)setTitle:(NSString *)title
{
_title = title;
[self setNeedsDisplay];
}
- (void)setIsSelected:(BOOL)isSelected
{
_isSelected = isSelected;
[self setNeedsDisplay];
}
复写drawRect方法
- (void)drawRect:(CGRect)rect {
NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc]init];
style.alignment = NSTextAlignmentCenter;
NSDictionary *dic = @{NSFontAttributeName :_font,
NSParagraphStyleAttributeName:style
};
rect.origin.y += 10;
[_title drawInRect:rect withAttributes:dic];
if (_isSelected)
{
//绘制线条
CGRect frame = CGRectMake(0, rect.size.height-2, rect.size.width, 2);
[[UIColor redColor]set];
UIRectFill(frame);
}
}
再到ToolView中将自定义的按钮视图添加到他的父视图上
- (void)creatSelectButton
{
NSArray *titleArray = @[@"颜色",@"线宽",@"橡皮",@"撤销",@"清屏",];
for (int i = 0; i < 5; i ++)
{
CGFloat width = kwidth/5;
SelectButton *selectButton = [[SelectButton alloc]initWithFrame:CGRectMake(i * width, 0, width, 40)];
selectButton.backgroundColor = [UIColor lightGrayColor];
[self addSubview:selectButton];
selectButton.title = titleArray[i];
selectButton.tag = i;
[selectButton addTarget:self action:@selector(selectButtonAction:) forControlEvents:UIControlEventTouchUpInside];
}
}
此时界面搭建完成
2，传递绘图的数据使用block
在ToolView的.h文件中定义block并创建属性
typedef void(^ColorBlock)(UIColor *color);
typedef void(^LineWidthBlock)(CGFloat lineWidth);
typedef void(^SelectBlock)(void);
@class SelectButton;
@interface ToolView : UIView
{
SelectButton *_LastButton;
NSArray *_lineArray;
UIView *_lineView;
UIView *_colorView;
ColorBlock _colorBlock;
LineWidthBlock _lineWidthBlock;
SelectBlock _selectEraser;
SelectBlock _selectUndo;
SelectBlock _selectClear;
}
- (void)creatColorBlock:(ColorBlock)colorBlock
withLineWidthBlock:(LineWidthBlock)lineWidth
withSelectEraser:(SelectBlock)selectEraser
withSelectUndoBlock:(SelectBlock)selectUndo
withSelectClearBlock:(SelectBlock)selectClear;
@end
在ToolView的.m文件中实现block的传递，调用
- (void)creatColorBlock:(ColorBlock)colorBlock
withLineWidthBlock:(LineWidthBlock)lineWidth
withSelectEraser:(SelectBlock)selectEraser
withSelectUndoBlock:(SelectBlock)selectUndo
withSelectClearBlock:(SelectBlock)selectClear
{
_colorBlock = colorBlock;
_lineWidthBlock = lineWidth;
_selectEraser = selectEraser;
_selectUndo = selectUndo;
_selectClear = selectClear;
}
- (void)selectButtonAction:(SelectButton *)button
{
_LastButton.isSelected = NO;
button.isSelected = YES;
_LastButton = button;
switch (button.tag)
{
case 0:
//选择颜色视图
_colorView.hidden = NO;
_lineView.hidden = YES;
break;
case 1:
//选择线宽视图
_colorView.hidden = YES;
_lineView.hidden = NO;
break;
case 2:
//选择橡皮视图
_selectEraser();
break;
case 3:
//选择撤销视图
_selectUndo();
break;
case 4:
//选择线宽视图
_selectClear();
break;
default:
break;
}
}
- (void)colorButtonAction:(UIButton *)button
{
UIColor *color = button.backgroundColor;
if (_colorBlock!=nil)
{
_colorBlock(color);
}
}
- (void)lineButtonAction:(UIButton *)button
{
NSNumber *number = _lineArray[button.tag];
CGFloat lineWidth = [number floatValue];
if (_lineWidthBlock!=nil)
{
_lineWidthBlock(lineWidth);
}
}
在视图控制器中进行传值，将block中的属性传递给drawView
//传递block，给drawView里的属性赋值
[toolView creatColorBlock:^(UIColor *color) {
//传递颜色
drawView.color = color;
} withLineWidthBlock:^(CGFloat lineWidth) {
//传递线宽
drawView.lineWidth = lineWidth;
} withSelectEraser:^{
//选择橡皮
drawView.color = [UIColor whiteColor];
drawView.lineWidth = 20;
} withSelectUndoBlock:^{
//撤销
[drawView undo];
} withSelectClearBlock:^{
//清屏
[drawView clear];
}];