ios - palette画板实现

实现原理

在自定义view上每次触摸屏幕时记录UIBezierPath路径然后将其渲染出来。（相当于对UIBezierPath的使用）

代码实现

1. 定义画板属性和必要的方法

@interface PaletteView : UIView
/**画笔宽度*/
@property(nonatomic,assign)CGFloat lineWidth;
/**画笔的颜色*/
@property(nonatomic,strong)UIColor *lineColor;
/**清除画板*/
- (void)clean;
/**撤销*/
- (void)rollback;
/**橡皮擦*/
- (void)eraser;
@end

2. 方法的实现（PaletteView.m）
   清除：原理是对路径的数组进行清空，然后渲染。
   撤销：原理是对路径的数组进行逐一删除，然后渲染。
   橡皮擦：原理是画一条和背景色一样的线

@interface PaletteView()
/**当前画板全部的路径(记录每次画画操作的路径)*/
@property(nonatomic,strong)NSMutableArray *palettePaths;
@end

//懒加载
-(NSMutableArray *)palettePaths{
    if (!_palettePaths) {
        _palettePaths = [NSMutableArray array];
    }
    return _palettePaths;
}

-(void)clean{
    [self.palettePaths removeAllObjects];
    //调用此方法会重新绘制
    [self setNeedsDisplay];
}

-(void)rollback{
    [self.palettePaths removeLastObject];
    [self setNeedsDisplay];
}

-(void)eraser{
    _lineColor = self.backgroundColor;
}

触摸屏幕时记录路径（在定义bezierPath时用了一个UIBezierPath继承类DWPalettePath，在里面定义了一个lineColor的属性，是为了方便记录每条路径的颜色）

@interface DWPalettePath : UIBezierPath
/**记录一个路径颜色（方便每次绘图使用）*/
@property(nonatomic,strong)UIColor *lineColor;

@end

---

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //获取触摸对象
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:touch.view];
    DWPalettePath *path = [DWPalettePath bezierPath];
    //给个最小值
    if (_lineWidth < 5) {
        [path setLineWidth:5];
    }else{
        [path setLineWidth:_lineWidth];
    }
    path.lineColor = _lineColor;
    [path moveToPoint:point];
    [self.palettePaths addObject:path];
}

-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:touch.view];
    [self.palettePaths.lastObject addLineToPoint:point];
    [self setNeedsDisplay];
}

渲染（注：每次执行 [self setNeedsDisplay]会执行drawRect方法）

- (void)drawRect:(CGRect)rect {
 for (DWPalettePath *path in self.palettePaths) {
        [path.lineColor set];
        [path setLineJoinStyle:kCGLineJoinRound];
        [path setLineCapStyle:kCGLineCapRound];
        [path stroke];
    }
}

3、控制器调用

@interface ViewController ()
@property(nonatomic,strong)PaletteView *paletteView;
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    self.paletteView  = [[PaletteView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height - 200)];
    self.paletteView.backgroundColor = [UIColor whiteColor];
    self.paletteView.lineColor = [UIColor redColor];
    self.paletteView.lineWidth = 10;
    [self.view addSubview:self.paletteView];
}
- (IBAction)redLine:(id)sender {
    self.paletteView.lineColor = [UIColor redColor];
}
- (IBAction)blueLine:(id)sender {
     self.paletteView.lineColor = [UIColor blueColor];
}
- (IBAction)lineWidtChange:(UISlider *)sender {
    self.paletteView.lineWidth = sender.value*20 + 5;
}

- (IBAction)clearPalette:(UIButton *)sender {
    [self.paletteView clean];
}
- (IBAction)rollback:(UIButton *)sender {
    [self.paletteView rollback];
}
- (IBAction)eraser:(UIButton *)sender {
    [self.paletteView eraser];
}

4、效果图

效果图.png

写此文章的目的是复习一下忘记的知识，希望也可以帮助到你。