19 实战演练：画板

最新推荐文章于 2025-06-13 09:14:12 发布

原创最新推荐文章于 2025-06-13 09:14:12 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

- (void)viewDidLoad

{

[super viewDidLoad];

PanelView *panel = [[PanelView alloc] initWithFrame:self.view.bounds];

[self.view addSubview:panel];

ToolView *toolView = [[ToolView alloc] initWithFrame:CGRectMake(0, 20, 320, 104)];

toolView.backgroundColor = [UIColor grayColor];

[self.view addSubview:toolView];

[toolView addSelectColorBlock:^(UIColor *color) {

panel.drawColor = color;

} selectLine:^(CGFloat lineWidth) {

panel.lineWidth = lineWidth;

} selectEarser:^{

panel.lineWidth = 10;

//橡皮

panel.drawColor = [UIColor whiteColor];

} selectUndo:^{

//撤销

[panel undo];

} selectClear:^{

//清屏

[panel clearView];

@implementation PanelView

- (id)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if (self) {

self.drawColor = [UIColor blackColor];

self.lineWidth = 5.0f;

self.backgroundColor = [UIColor whiteColor];

}

return self;

}

- (void)undo {

//移除最后一条路径

[self.paths removeLastObject];

//重新绘制

[self setNeedsDisplay];

}

//清屏

- (void)clearView {

//移除最后一条路径

[self.paths removeAllObjects];

//重新绘制

[self setNeedsDisplay];

}

#pragma mark - 绘制方法

- (void)drawRect:(CGRect)rect {

//遍历所有的路径，将这些路径绘制

for (PathModel *p in self.paths) {

//1.获取上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

//2.设置绘制属性

[p.color setStroke]; //设置线的颜色

CGContextSetLineWidth(ctx, p.lineWidth); //设置线宽

//3.绘制CGPath

CGContextAddPath(ctx, p.path);

//4.绘制

CGContextDrawPath(ctx, kCGPathStroke);

}

if (self.drawPath != nil) {

//1.获取上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

//2.设置绘制属性

[self.drawColor set]; //设置线的颜色

CGContextSetLineWidth(ctx, self.lineWidth); //设置线宽

//3.绘制CGPath

CGContextAddPath(ctx, self.drawPath);

//4.绘制

CGContextDrawPath(ctx, kCGPathStroke);

}

/**

绘制有两种方式

1. 直接向Context上绘制图形

2. 创建一个CGPath, 向CGPath上绘制图形, 再将CGPath绘制到Context

#pragma mark - touch

//1.开始触摸

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

UITouch *touch = [touches anyObject];

CGPoint p = [touch locationInView:self];

// NSLog(@"%@",NSStringFromCGPoint(p));

//1.创建一个CGPath

self.drawPath = CGPathCreateMutable();

//2.将第一个点添加到CGPath

CGPathMoveToPoint(self.drawPath, NULL, p.x,p.y);

}

//2.触摸移动中...

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

//1.取得触摸点

UITouch *touch = [touches anyObject];

CGPoint p = [touch locationInView:self];

//2.将触摸点添加到路径中

CGPathAddLineToPoint(self.drawPath, NULL, p.x, p.y);

//3.重新绘制

[self setNeedsDisplay];

}

//3.触摸结束

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {

//触摸结束后，将完整的路径添加到数组中保存起来

if (self.paths == nil) {

self.paths = [NSMutableArray array];

}

PathModel *pathModel = [[PathModel alloc] init];

pathModel.path = self.drawPath;

pathModel.color = self.drawColor;

pathModel.lineWidth = self.lineWidth;

[self.paths addObject:pathModel];

CGPathRelease(self.drawPath);

self.drawPath = nil;

@implementation ToolView

- (id)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if (self) {

//1.创建按钮

[self _createButtons];

//2.创建颜色视图

[self _createColorView];

//3.创建选择线宽的视图

[self _createLineWidthView];

}

return self;

}

- (void)addSelectColorBlock:(SelectColorBlock)colorBlock

selectLine:(SelectLineBlock)selectLine

selectEarser:(SelectBlock)selectEarser

selectUndo:(SelectBlock)selectUndo

selectClear:(SelectBlock)selectClear {

_colorBlock = [colorBlock copy];

_lineBlock = [selectLine copy];

_selectEarser = [selectEarser copy];

_selectUndo = [selectUndo copy];

_selectClear = [selectClear copy];

}

#pragma mark - create views 创建子视图

- (void)_createButtons {

NSArray *titleArray = @[@"颜色",@"线宽",@"橡皮",@"撤销",@"清屏"];

_buttonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.bounds), 40)];

_buttonView.backgroundColor = [UIColor grayColor];

[self addSubview:_buttonView];

CGFloat width = self.bounds.size.width/titleArray.count;

for (int i=0; i<titleArray.count; i++) {

SelectButton *button = [[SelectButton alloc] initWithFrame:CGRectMake(i*width, 0, width, 40)];

button.backgroundColor = [UIColor clearColor];

button.title = titleArray[i];

button.font = [UIFont systemFontOfSize:16];

button.tag = i;

[button addTarget:self action:@selector(tapButton:) forControlEvents:UIControlEventTouchUpInside];

[_buttonView addSubview:button];

}

- (void)_createColorView {

_colorView = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_buttonView.frame), 320, 60)];

_colorView.backgroundColor = [UIColor clearColor];

_colorView.hidden = YES;

[self addSubview:_colorView];

_colorArray = @[

[UIColor darkGrayColor],

[UIColor redColor],

[UIColor greenColor],

[UIColor blueColor],

[UIColor yellowColor],

[UIColor orangeColor],

[UIColor purpleColor],

[UIColor brownColor],

[UIColor blackColor]

];

CGFloat width = 320/_colorArray.count;

for (int i=0; i<_colorArray.count; i++) {

UIControl *control = [[UIControl alloc] initWithFrame:CGRectMake(i*width, 5, width-5, 50)];

control.tag = i;

control.backgroundColor = _colorArray[i];

[control addTarget:self action:@selector(selectColor:) forControlEvents:UIControlEventTouchUpInside];

[_colorView addSubview:control];

}

- (void)_createLineWidthView {

_lineWidthView = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_buttonView.frame), 320, 60)];

_lineWidthView.hidden = YES;

_lineWidthView.backgroundColor = [UIColor clearColor];

[self addSubview:_lineWidthView];

_lineWidthArray = @[@1.0,@3.0,@5.0,@8.0,@10.0,@15.0,@20.0];

CGFloat width = 320/_lineWidthArray.count;

for (int i=0; i<_lineWidthArray.count; i++) {

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

NSString *title = [NSString stringWithFormat:@"% 点",_lineWidthArray[i]];

[button setTitle:title forState:UIControlStateNormal];

button.frame = CGRectMake(i*width, 5, width-5, 50);

button.tag = i;

[button addTarget:self action:@selector(selectLineWidth:) forControlEvents:UIControlEventTouchUpInside];

[_lineWidthView addSubview:button];

}

#pragma mark - 按钮事件

- (void)tapButton:(SelectButton *)button {

// NSLog(@"%d",button.tag);

//1.之前的Button设置为不选中

self.selectButton.selectedState = NO;

//2.当前的button设置为选中

button.selectedState = YES;

//3.记录当前选中的button

self.selectButton = button;

//4.判断按钮

switch (button.tag) {

case 0:

_colorView.hidden = NO;

_lineWidthView.hidden = YES;

break;

case 1:

_colorView.hidden = YES;

_lineWidthView.hidden = NO;

break;

case 2:

//橡皮

_selectEarser();

break;

case 3:

_selectUndo();

break;

case 4:

_selectClear();

break;

default:

break;

}

- (void)selectColor:(UIControl *)control {

UIColor *selectColor = _colorArray[control.tag];

// NSLog(@"%@",selectColor);

//将选中颜色的事件，传递给外部

//[代理对象协议方法1];

if (_colorBlock != nil) {

_colorBlock(selectColor);

}

- (void)selectLineWidth:(UIButton *)button {

NSNumber *lineWidth = _lineWidthArray[button.tag];

//将选中的线宽事件，传递给外部

//[代理对象协议方法2];

if (_lineBlock) {

_lineBlock([lineWidth floatValue]);

}

@implementation SelectButton

- (id)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if (self) {

self.font = [UIFont systemFontOfSize:14.0];

}

return self;

}

//显示属性修改之后，调用setNeedsDisplay 重新绘制

- (void)setFont:(UIFont *)font {

if (_font != font) {

_font = font;

[self setNeedsDisplay];

}

- (void)setTitle:(NSString *)title {

if (_title != title) {

_title = title;

[self setNeedsDisplay];

}

- (void)setSelectedState:(BOOL)selectedState {

_selectedState = selectedState;

[self setNeedsDisplay];

}

#pragma mark - 绘制

- (void)drawRect:(CGRect)rect {

CGRect titleFrame = rect;

titleFrame.origin.y += 10;

//1.将标题绘制上

[self.title drawInRect:titleFrame withFont:self.font lineBreakMode:NSLineBreakByTruncatingTail alignment:NSTextAlignmentCenter];

//2.绘制选中的线条

if (self.selectedState) {

CGRect frame = CGRectMake(0, CGRectGetHeight(rect)-2, CGRectGetWidth(rect), 2);

[[UIColor redColor] setFill];

UIRectFill(frame);

}

}];

}