绘图-简单手绘板的实现

</br>

前言

本文实现一个简单的手绘画板的效果，主要是记录下实现原理，虽然很简单，但是这可以是实现复杂效果的基础。毕竟t他山之石可以攻玉。

手绘板.gif

原理思路

• 在touchesBegan 方法中，每次都创建一个CAShapeLayer加载在当前视图的layer上，在touchesMoved方法中改变该 CAShapeLayer 基于UIBezierPath 的路径，即可实现绘制路径的效果。
• 创建两个容器，lines用来盛放每次创建的CAShapeLayer，canceledLines 用来盛放每次删除的layer。
• 清屏操作：移除当前视图layer上的所有子图层。并清空lines。
• 撤销操作：移除当前视图layer上的lines最后的那个图层。并移除lines最后一个图层。把这个layer放入canceledLines中。
• 恢复操作：当前视图layer加载上canceledLines中最后一个layer。移除canceledLines 中的最后一个layer，并加入到lines中。

源码实现

文件结构

自定义一个UIBezierPath的子类 LGPaintpath，下面是它的初始化方法

 + (instancetype)paintPathWithLineWidth:(CGFloat)width
                        startPoint:(CGPoint)startP
  {
    LGPaintPath * path = [[self alloc] init];
    path.lineWidth = width;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineCapRound; 
    [path moveToPoint:startP];
    return path;
}

LGDrawer中的实现

• touchesBegan 事件
  - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
  {
  CGPoint startP = [self pointWithTouches:touches];

    if ([event allTouches].count == 1) {
        
        LGPaintPath *path = [LGPaintPath paintPathWithLineWidth:_width
                                                       startPoint:startP];
        _path = path;
        
        CAShapeLayer * slayer = [CAShapeLayer layer];
        slayer.path = path.CGPath;
        slayer.backgroundColor = [UIColor clearColor].CGColor;
        slayer.fillColor = [UIColor clearColor].CGColor;
        slayer.lineCap = kCALineCapRound;
        slayer.lineJoin = kCALineJoinRound;
        slayer.strokeColor = self.lineColor.CGColor;
        slayer.lineWidth = path.lineWidth;
        [self.layer addSublayer:slayer];
        _slayer = slayer;
        [[self mutableArrayValueForKey:@"canceledLines"] removeAllObjects];
        [[self mutableArrayValueForKey:@"lines"] addObject:_slayer];
        
      }
  }
  
    - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
  {
    // 获取移动点
    CGPoint moveP = [self pointWithTouches:touches];
    
     if ([event allTouches].count == 1) {
        
        [_path addLineToPoint:moveP];
        _slayer.path = _path.CGPath;
    }
  }
  - (CGPoint)pointWithTouches:(NSSet *)touches
  {
    UITouch *touch = [touches anyObject];
    return [touch locationInView:self];
   }
  

• 清屏操作
  - (void)clearScreen
  {
  if (!self.lines.count) return ;
  [self.lines makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
  [[self mutableArrayValueForKey:@"lines"] removeAllObjects];
  [[self mutableArrayValueForKey:@"canceledLines"] removeAllObjects];
  }

• 撤销操作

   - (void)undo
  {
   //当前屏幕已经清空，就不能撤销了
   if (!self.lines.count) return;
   [[self mutableArrayValueForKey:@"canceledLines"] addObject:self.lines.lastObject];
   [self.lines.lastObject removeFromSuperlayer];
   [[self mutableArrayValueForKey:@"lines"] removeLastObject];
  
   }
  

• 恢复操作
  - (void)redo
  {
  //当没有做过撤销操作，就不能恢复了
  if (!self.canceledLines.count) return;
  [[self mutableArrayValueForKey:@"lines"] addObject:self.canceledLines.lastObject];
  [[self mutableArrayValueForKey:@"canceledLines"] removeLastObject];
  [self drawLine];
  }

    // 画线
    - (void)drawLine{
      [self.layer addSublayer:self.lines.lastObject];
    }
  

• 截取某部分的视图

  顺序不可以错
   UIGraphicsBeginImageContext(_drawer.bounds.size);
   [_drawer.layer renderInContext:UIGraphicsGetCurrentContext()];
   UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
   UIGraphicsEndImageContext();
   //render的意思是渲染
   //会使图片和背景图层在结合的地方更自然
  

• 保存图片到相册中
  - (void)loadImageFinished:(UIImage *)image{
  UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), (__bridge void *)self);
  }
  - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{
  NSLog(@"image = %@, error = %@, contextInfo = %@", image, error, contextInfo);
  }

小结

这篇记录实现的手绘板效果，很简单，但是挺有趣。