iOS如何绘制上图的多彩曲线图

• 中间的线段是正常颜色
• 超过一定范围显示红色警告
• 低于一定范围显示黄色警告

源码地址:

github.com/hefeijinbo/…

总体流程

创建渐变Layer

颜色从最顶部的红色->浅蓝色->黄色, 中间有颜色过渡效果

• layer.colors 渐变的颜色数组: [红色, 浅蓝色, 浅蓝色, 黄色]
• layer.locations 表示每段颜色渐变的范围
  • 0-0.3 : 红色区域
  • 0.3-0.4 : 红色->浅蓝的过渡区域
  • 0.4-0.5: 浅蓝色区域
  • 0.5-0.6: 浅蓝色->黄色过渡区域
  • 0.6-1: 黄色区域

创建坐标点数组

- (NSArray *)createPointsWithYValuess:(NSArray *)yValues {
    NSMutableArray *points = [NSMutableArray array];
    CGFloat xSeqValue = self.bounds.size.width / yValues.count;
    for (NSInteger i = 0;i<yValues.count;i++) {
        CGFloat yValue = [yValues[i] floatValue];
        CGPoint point = CGPointMake(xSeqValue * i, yValue * self.bounds.size.height);
        [points addObject:[NSValue valueWithCGPoint:point]];
    }
    return points;
}

绘制曲线路径

addCurveToPoint绘制一个点的路径的原理

最后把所有的点的曲线连接起来就是最后的路径了

mask 蒙版过滤出曲线部分

// 创建曲线Layer
- (CAShapeLayer *)createCurveLayer {
    CAShapeLayer *shaperLayer = [CAShapeLayer layer];
    shaperLayer.lineCap = kCALineCapRound;
    shaperLayer.lineJoin = kCALineJoinRound;
    shaperLayer.backgroundColor = [UIColor clearColor].CGColor; // 背景透明, alpha = 0
    shaperLayer.fillColor = [[UIColor clearColor] CGColor]; // fillColor alpha = 0
    shaperLayer.strokeColor = [UIColor redColor].CGColor; // 线段使用任何颜色都可以,只要alpha > 0
    shaperLayer.lineWidth = 4;
    shaperLayer.frame = self.bounds;
    return shaperLayer;
}

// 创建曲线Layer
CAShapeLayer *curveLayer = [self createCurveLayer];
curveLayer.path = [self createCurvePathWithPoints:_points].CGPath; 
// 1. mask(蒙版图层): 作用就是让父图层(gradientLayer)部分区域可见
// 2. curveLayer alpha>0的像素点显示出来, alpha = 0 的像素点被过滤掉了。
// 3. 最后的效果是gradientLayer 显示了多彩的曲线。
gradientLayer.mask = curveLayer;

最后效果图