画板功能的实现

2017-09-15 本文已影响0人闫仕伟

最近项目中用到了一个客户签字的功能，具体步骤就是客户签字确认，App把客户的签字生成一张PNG图片上传到服务器，服务器再生成PDF下发到App展示，所以需要实现一个画板的功能。

刚开始的时候是想通过drawRect方法配合UIBezierPath来实现的。
具体步骤如下：

创建一个UIBeizerPath类型的属性path，用来在touchMove里面记录手指划过的轨迹。创建一个可变数组pathArray，用来储存多个UIBeizerPath轨迹。
在touchBegan方法里面把path的初始点移动到手指所在位置
在touchMoved方法里面记录手指移动过的轨迹，调用setNeedsDispaly方法，该方法会自动调用drawRect方法，在drawRect方法里面，对数组中的UIBeizerPath进行绘制。
在touchesEnded方法里面把path属性添加到数组里面，并且把path属性置nil，以便于下次绘制的时候对path进行初始化。

下面上代码：

  、、、
- (NSMutableArray *)pathArray {
  if (_pathArray == nil) {
    _ pathArray = [NSMutableArray array];
  }
  return _pathArray;
}

- (UIBezierPath *)path {
  if (_path == nil) {
    _path = [UIBezierPath bezierPath];
    _path.lineWidth = 10;
    _path.lineCapStyle = kCGLineCapRound;
    _path.lineJoinStyle = kCGLineJoinRound;
  }
  return _path;
}

- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event{
  UITouch *touch = [touches anyObject];
  CGPoint point = [touch locationInView:self];
  [self.path moveToPoint:point];
}

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

- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent *)event{
   [self.pathArray addObject:self.path];
   self.path = nil;
}

- (void)drawRect:(CGRect)rect {
   [[UIColor blackColor] setStroke];
   for (UIBezierPath *path in self.pathArray) {
        [path stroke];
   }
   [self.path stroke];
}
 、、、

做出来的效果如下：

QQ20170914-174520-HD.gif

可以看到功能算是实现了，但是性能优化方面实在太差，如果手指一直移动的话CPU和内存都会暴涨。后来在网上看到了一篇文章内存恶鬼drawRect，我才知道了内存暴涨的原因，因为我重写了drawRect方法。而且我在touchMoved方法里面频繁对视图进行了重新绘制，这个渲染的过程会大量的消耗CPU资源。

我们在手机屏幕上看到的视图，实际上都是由UIView的属性CALayer来进行绘制和渲染的。而CALayer内部有一个contents属性，该属性默认可以传一个id类型的对象。contents也被称为寄宿图，当我们调用drawRect方法的时候，系统就会为视图分配一个寄宿图，这个寄宿图的像素尺寸等于视图大小乘以contentsScale（这个属性与屏幕分辨率有关，我们的画板程序在不同模拟器下呈现不同的内存消耗量也是因为该值不同）的值。所以，不管你的drawRect方法里面有没有代码，实际上都会对内存有所损耗。

作者在文章中也提出了解决方法，就是直接使用专有图层CAShapeLayer。CAShaperLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。用CGPath来定义想要绘制的图形，CAShapeLayer会自动渲染。与直接使用CoreGraphics绘制layer对比，CAShapeLayer有以下优点：

渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形比用CoreGraphics快很多。
高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多内存。
不会被图层边界裁剪掉（这个我在写画板的过程中也发现了，就算手指移动的轨迹超出了画板的范围，也能绘制出轨迹，设置视图的maskToBounds就可以解决了）。
不会出现像素化。

OK，既然知道了替代方法，接下来就是撸起袖子干了，步骤如下：

创建一个UIBezierPath类型的属性path，用来记录手指划过的轨迹。创建一个CAShapeLayer类型的属性shapeLayer，用来渲染轨迹。
在touchBegan方法里面把path的初始点移动到手指所在位置。
在touchMoved方法里面用path记录手指的移动轨迹，并且把path赋值给CAShapeLayer进行渲染。
在touchEnded方法里面把shaperLayer和path置nil，以便于画下一条轨迹的时候对它们进行初始化。

代码：

   、、、
- (CAShapeLayer *)shapeLayer{
  if (_shapeLayer == nil) {
    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.strokeColor = [UIColor blackColor].CGColor;
    _shapeLayer.fillColor = [UIColor clearColor].CGColor;
    _shapeLayer.lineJoin = kCALineJoinRound;
    _shapeLayer.lineCap = kCALineCapRound;
    _shapeLayer.lineWidth = 10;
    [self.layer addSublayer:_shapeLayer];
   }
   return _shapeLayer;
 }

- (UIBezierPath *)path{
  if (_path == nil) {
    _path = [UIBezierPath bezierPath];
    _path.lineWidth = 10;
  }
  return _path;
}

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

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
  UITouch *touch = [touches anyObject];
  CGPoint point = [touch locationInView:self];
  [self.path moveToPoint:point];
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
  self.shapeLayer = nil;
  self.path = nil;
}
、、、

现在我们再来看一下内存：

QQ20170915-142931-HD.gif

基本没有什么大的损耗了。

画板功能的实现

猜你喜欢

热点阅读