IOS开发之——画板-界面搭建及画线(1)

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • 画板—界面布局搭建
  • 画板—画线功能实现

二 界面布局

2.1 ToolBar布局

  • 首先拖入ToolBar(只有一个BarButtonItem)修改为清屏
  • 依次复制BarButtonItem撤销，橡皮擦，照片和保存
  • 在照片和保存BarButtonItem之间放入Flexible Space，将其隔开

2.2 底部按钮界面

  • 拖入View，并设置backgroundcolor，依次设置view的左右距离和高度
  • 拖入Horizontal Slider，并设置距离左右的距离和高度
  • 拖入红绿蓝三个按钮，对于红按钮设置其距离左边的距离20和高度30；对于绿色按钮按住Control指向红色按钮，设置Horizontal Spacing，Center Vertically，Equal Widths和Equal Heights，蓝色按钮同理

2.3 设置中间部分View

  • 根据ToolBar的y和高度设置中间View的起点y
  • 根据底部的y设置中间View的高度

三 画线功能

3.1 功能描述

  • 自定义绘制图形的PaintView
  • touchesBegin开始时，确定绘制的起点
  • touchesMoved时，确定绘制的终点
  • 定义绘制线的数组paths，当绘制开始时加入到paths数组中，drawRect时，执行path的stroke方法将线条绘制出来

3.2 功能代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
//
//  PaintView.m
//  画板-2
//
//  Created by zxc on 2021/4/5.
//

#import "PaintView.h"

@interface PaintView()

@property (nonatomic,strong) UIBezierPath *path;
@property (nonatomic,strong) NSMutableArray *paths;
@end

@implementation PaintView


-(NSMutableArray *)paths
{
    if (_paths==nil) {
        _paths=[NSMutableArray array];
    }
    return  _paths;
}

//确定起点
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    //创建路径
    UIBezierPath *path=[UIBezierPath bezierPath];
    _path=path;
    [self.paths addObject:path];
    //获取触摸点
    CGPoint pos=[self pointWithTouches:touches];
    //确定起点
    [path moveToPoint:pos];
}

-(CGPoint)pointWithTouches:(NSSet *)touches
{
    UITouch *touch=[touches anyObject];
    return [touch locationInView:self];
}
//确定终点
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    //获取触摸点
    CGPoint pos=[self pointWithTouches:touches];
    [_path addLineToPoint:pos];
    //重绘
    [self setNeedsDisplay];
    
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    for (UIBezierPath *path in self.paths) {
        [path stroke];
    }
}

@end

3.3 效果图