封闭折线图形的渐变色

Posted 2020-11-01 liuw_flexi

希望实现这个效果，于是在简书上问了一个作者，让我 ：先用正常的CAGradientLayer做出渐变色，然后利用CAlayer的mask属性进行裁切

https://www.jianshu.com/p/8c45d8a1645d#comment-23013690

 

嗯嗯 确实可以 但是还有一个问题就是那条黑色的线不知道怎么画成虚线，而且画成如上图实线的话，转折处还是那么不好。

 

这是代码：在 "

ZYWChart

" 这个Demo上的修改

- (void)drawLineLayer
{
    ///渐变色
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = self.bounds;
    gradient.colors = [NSArray arrayWithObjects:
                       (id)[UIColor colorWithRed:0 green:143/255.0 blue:234/255.0 alpha:1.0].CGColor,
                       (id)[UIColor colorWithRed:0 green:173/255.0 blue:234/255.0 alpha:1.0].CGColor,
                       (id)[UIColor whiteColor].CGColor, nil];
    ///画分时线
    UIBezierPath *path = [UIBezierPath drawLine:self.modelPostionArray];
    
    ZYWLineModel *lastPoint = _modelPostionArray.lastObject;
    //连线的顺序是顺时针 连结成封闭图形之后即可填充颜色
    [path addLineToPoint:CGPointMake(lastPoint.xPosition,self.height - self.topMargin - self.timeLayerHeight)];//最右下角那个点

    [path addLineToPoint:CGPointMake(self.leftMargin, self.height - self.topMargin - self.timeLayerHeight)];//最左下角那个点

    ZYWLineModel *firstPoint = _modelPostionArray.firstObject;
    [path addLineToPoint:CGPointMake(self.leftMargin , self.height - self.topMargin - self.timeLayerHeight + firstPoint.yPosition)];
    
    //[[UIColor whiteColor] setFill];// 走势线下面的填充颜色
    //[path fill]; // 填充颜色
    [path stroke]; // stroke 表示连线
    [path closePath]; // 得到封闭图形
    
    self.lineChartLayer = [CAShapeLayer layer];
    self.lineChartLayer.path = path.CGPath;//线加到layer上
    self.lineChartLayer.strokeColor = self.lineColor.CGColor;
    self.lineChartLayer.fillColor = [[UIColor orangeColor] CGColor];
    
    self.lineChartLayer.lineWidth = self.lineWidth;
    self.lineChartLayer.lineCap = kCALineCapRound;
    self.lineChartLayer.lineJoin = kCALineJoinRound;
    self.lineChartLayer.contentsScale = [UIScreen mainScreen].scale;
    //[self.layer addSublayer:self.lineChartLayer];
    //self.lineChartLayer.fillRule  = kCAFillRuleEvenOdd;
    
    gradient.mask = self.lineChartLayer;

    [self.layer addSublayer:gradient];
    [self startRoundAnimation];

    //再加一条盖在上面的线?
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 3); //不平滑
    CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextSetShouldAntialias(context, YES);

    [self.modelPostionArray enumerateObjectsUsingBlock:^(ZYWLineModel* obj, NSUInteger idx, BOOL * _Nonnull stop) {
        
        if (idx == 0)
        {
            CGContextMoveToPoint(context, obj.xPosition, obj.yPosition);
        }
        else
        {
            CGContextAddLineToPoint(context, obj.xPosition, obj.yPosition);
        }
        
    }];
    
    CGContextStrokePath(context);
    
}

 

后来发现gitHub上 "Charts"这个库其实就实现了这种渐变色

 

 

然后又学习了一下　这个库的引入和基本使用

引入：https://www.tuicool.com/articles/JFBFBjj

用法：https://blog.csdn.net/wis8520/article/details/70157451