iOS 两种方式高效的绘制动态波形

需要实现的效果图

waves.gif

绘制动态波形的总体思路

在我们绘制波形的控件中，定义一个可变数组receiveDataArray，不断接收外面心电数据，同时定义一个定时器，以把数据不断的显示在网格中，绘制成心电波形；

    _currentLocationX = 0;  // 当前波形点的X位置，
    _receiveDataArray = [NSMutableArray array]; // 接收心电数据的数组
    _pointSpace = self.frame.size.height / 500.0;   // 两波形点之间的距离
    _totalWidth = self.frame.size.width;  // 要绘制的总宽度
    _pointCount = (NSInteger)_totalWidth / _pointSpace; // 一屏幕总的点数
    // 开启一个定时器在 drawWaves 方法 绘制波形
    CADisplayLink *displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(drawWaves)];
    if (@available(iOS 10.0, *)) {
        displayLink.preferredFramesPerSecond = 30;  // 每秒三十次
    } else {
        displayLink.frameInterval = 2; // 每秒三十次,iOS10以下的方法
    }
    // 添加到NSRunLoopCommonModes模式中，避免UI交互，影响绘制
    [displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

普通方式——通过setNeedsDisplay来全屏绘制

每秒三十次，每次通过setNeedsDisplay方法把屏幕上的点重新绘制一遍，这里要注意给动的那个点，留出一部分空白区域，每次绘制的点应该要比实际数小20个左右，在定时器方法中,调用 setNeedsDisplay方法开始绘制

 - (void)drawWaves
 {
     // 只要多于10个就开始画
     if (self.receiveDataArray.count >= 10) {
     // 把接收到的数据赋值给另外一个数组
     self.midArray = [NSMutableArray arrayWithArray:self.receiveDataArray];
     // 清空数组
     [self.receiveDataArray removeAllObjects];
     [self setNeedsDisplay];  // 调用drawRect方法开始绘制
 }

在drawRect方法中，我们开始绘制波形

 - (void)drawRect:(CGRect)rect
 {
     // 控件高度
     CGFloat height = self.frame.size.height;
 
     // self.midArray  每次新增加的数据数组
     if (self.midArray.count == 0) {
     return;
     }
 
     // 把新增加的数据转为要新绘制的点
     for (int i = 0; i < self.midArray.count; i++) {
     // 如果当前位置大于要绘制的宽度，从开始位置继续画
     if (_currentLocationX > _totalWidth) {
     _currentLocationX = 0;
     }
 
     // 获取数组中的数据
     CGFloat tempY = [self.midArray[i] floatValue];
 
     // 把数据转化为波形的y值，不需要关心怎么转的，数值随意填，看这像就行了
     CGFloat y = height/2 + height *(tempY - 2040)/1784;
 
     // 波形点，添加到数组中
     CGPoint startPoint = CGPointMake(_currentLocationX,y);
     NSValue *value = [NSValue valueWithCGPoint:startPoint];
     [self.pointArray addObject:value];
     // 当前X位置增加单位距离
     _currentLocationX += _pointSpace;
     }
 
     // 留出二十个点的空隙，显示那个空白的移动点
     if (self.pointArray.count > _pointCount - 20) {
     [self.pointArray removeObjectsInRange:NSMakeRange(0, self.pointArray.count - _pointCount + 20)];
     }
 
     CGContextRef ctx = UIGraphicsGetCurrentContext();  // 获取上下文
     CGPoint point = [self.pointArray[0] CGPointValue];
     CGContextMoveToPoint(ctx, point.x, point.y);  // 移动到第一个点
     CGContextSetLineWidth(ctx, 1);  // 设置宽度
     for (NSInteger i = 1; i < [self.pointArray count];i++) {
     if (self.pointArray[i] == nil) {
     break;
     }
     CGPoint previousPoint = [self.pointArray[i - 1] CGPointValue];  // 前面的点
     CGPoint nextPoint = [self.pointArray[i] CGPointValue]; // 后面的点
     // 如果后面的点小于前面点的x值，表明已经回到开始值，不要增加线，把点移到原点；
     if (nextPoint.x  < previousPoint.x) {
     // 移动到起点
     CGContextMoveToPoint(ctx, nextPoint.x, nextPoint.y);
     } else {
     // 继续增加线
     CGContextAddLineToPoint(ctx, nextPoint.x, nextPoint.y);
     }
     }
     [[UIColor blackColor] setStroke]; // 设置颜色
     CGContextStrokePath(ctx);  // 画波形
 }

资源占用，见图

setNeedsDisplay.png

这种全屏幕绘制，占用的cpu很高，到达了18%,性能很差；

高效方式1——通过setNeedsDisplayInRect 方法绘制

通过setNeedsDisplay方法，全屏绘制效率很低，观察波形，我们可以看到除了新来的那一部分数据在变，其它部分是没有变的，有没有办法让这部分数据不重新绘制，只绘制新来的那一部分数据，查找API,发现有setNeedsDisplayInRect这个方法，跟setNeedsDisplay这个方法一样，调用它也会触发drawRect这个方法，但它只绘制我们指定的那一部分屏幕区域；

注意我们给出的数据一定要超过我们指定的区域，避免把相交区域的波形的裁剪细了，不对称

在定时器方法中

 - (void)drawWaves
 {
 // 只要多于10个就开始画
     if (self.receiveDataArray.count >= 10) {
         // 把接收到的数据赋值给另外一个数组
         self.midArray = [NSMutableArray arrayWithArray:self.receiveDataArray];
         // 清空数组
         [self.receiveDataArray removeAllObjects];
         [self shape];
         //        [self setNeedsDisplay];
         #if 0
         NSInteger midcount = [self.midArray count];
 
         // 每次多画十个，也就是10个的空隙，_currentLocationX 现在的位置，_pointSpace 两点之间的距离
         CGFloat totalNum = _currentLocationX + _pointSpace * (midcount + 10);
         if (totalNum > _totalWidth) {
             // 大于屏幕的宽度时，两部分要画， 最后面和最前面，往开始位置前面，不要纠结于5是什么，根据实际情况调节就是了
             // 后半部分
             [self setNeedsDisplayInRect:CGRectMake(_currentLocationX - _pointSpace * 5, 0, _totalWidth - _currentLocationX + _pointSpace * 5, self.frame.size.height)];
             // 前半部分
             [self setNeedsDisplayInRect:CGRectMake(0, 0, totalNum - _totalWidth, self.frame.size.height)];
         } else {
         // 小于屏幕宽度
            [self setNeedsDisplayInRect:CGRectMake(_currentLocationX - _pointSpace * 5 , 0, _pointSpace *(midcount + 15), self.frame.size.height)];
         }
     }
 }

在drawRect方法中都只绘制的最新的四十个，因为我接收的数据每次大约是10个，我绘制的比它多个30个左右进行了，避免相交部分被裁切；

 - (void)drawRect {
      同上........
 // 这部分改为下面那部分
  if (self.pointArray.count > _pointCount - 10) {
        [self.pointArray removeObjectsInRange:NSMakeRange(0, self.pointArray.count - _pointCount + 10)];
     }
  
 // 每次最多画40个点，大于 setNeedsDisplayInRect 方法里 设置的范围就行了
     if (self.pointArray.count > 40) {
     [self.pointArray removeObjectsInRange:NSMakeRange(0, self.pointArray.count - 40)];
     }
 }

资源占用

setNeedsDisplayInRect.png

相比较于setNeedsDisplay CPU从18%降低到了2%，内存降低了4M左右，性能优化很明显

高效方式2——通过CAShapeLayer方式绘制

CAShapeLayer创建一个CAShapeLayer对象，每次设置它的path来绘制波形，在初始化方法中设置

 CAShapeLayer *shape = [[CAShapeLayer alloc] init];
 shape.lineCap = kCALineCapRound;
 [self.layer addSublayer:shape];
 shape.strokeColor = [UIColor blackColor].CGColor;
 shape.fillColor = [UIColor clearColor].CGColor;
 shape.lineWidth = 1.0f;
 self.shapLayer = shape;
 self.path = [UIBezierPath bezierPath]; // 创建

在定时器方法中，每次设置CAShapeLayer的路径就行了

 - (void)setupShapePath:(CGRect)rect
 {
     // 控件高度
     CGFloat height = self.frame.size.height;
 
     // self.midArray  每次新增加的数据数组
     if (self.midArray.count == 0) {
     return;
     }
 
     // 把新增加的数据转为要新绘制的点
     for (int i = 0; i < self.midArray.count; i++) {
     // 如果当前位置大于要绘制的宽度，从开始位置继续画
     if (_currentLocationX > _totalWidth) {
     _currentLocationX = 0;
     }
 
     // 获取数组中的数据
     CGFloat tempY = [self.midArray[i] floatValue];
 
     // 把数据转化为波形的y值，不需要关心怎么转的，数值随意填，看这像就行了
     CGFloat y = height/2 + height *(tempY - 2040)/1784;
 
     // 波形点，添加到数组中
     CGPoint startPoint = CGPointMake(_currentLocationX,y);
     NSValue *value = [NSValue valueWithCGPoint:startPoint];
     [self.pointArray addObject:value];
     // 当前X位置增加单位距离
     _currentLocationX += _pointSpace;
     }
 
     // 留出十个点的空隙，显示那个空白的移动点
     if (self.pointArray.count > _pointCount - 30) {
     [self.pointArray removeObjectsInRange:NSMakeRange(0, self.pointArray.count - _pointCount + 30)];
     }
 
     // 移除所有的点
     [self.path removeAllPoints];
     CGPoint point = [self.pointArray[0] CGPointValue];
     [self.path moveToPoint:point];
     for (NSInteger i = 1; i < [self.pointArray count];i++) {
     if (self.pointArray[i] == nil) {
     break;
     }
     CGPoint previousPoint = [self.pointArray[i - 1] CGPointValue];  // 前面的点
     CGPoint nextPoint = [self.pointArray[i] CGPointValue]; // 后面的点
     // 如果后面的点小于前面点的x值，表明已经回到开始值，不要增加线，把点移到原点；
     if (nextPoint.x  < previousPoint.x) {
     // 移动到起点
     [self.path moveToPoint:nextPoint];
     } else {
     // 继续增加线
     [self.path addLineToPoint:nextPoint];
     }
     }
     self.shapLayer.path = self.path.CGPath; // 设置shapeLayer的路径
 }

占用资源

CAShapeLayer.png

CPU跟setNeedsDisplayInRect差不多，多了2%左右，但相较于setNeedsDisplay好了很多，惊讶的是，占用内存居然比setNeedsDisplayInRect还少，要知到这里是把全屏幕的数据加进去的，而setNeedsDisplayInRect只算了部分数据；；

多讲一下，关于CAShapeLayer,苹果弄出的一个很很很牛逼的控件，能实现很多神奇的效果，占用资源也非常少，如果你不是很懂，推荐去看一下；

总结：

setNeedsDisplay方法效率很差，占用CPU和内存都很高，不推荐使用，我们做其它方面的项目时，用这方法也应特别小心，至于setNeedsDisplayInRect和CAShapeLayer两种方法，性能都不错，相对来说，setNeedsDisplayInRect性能稍微好点，但判断绘制的区域很麻烦，综合考虑，推荐使用CAShapeLayer方法；