帶漸變圖層的曲線圖繪制

在進行曲線圖漸變圖層繪制的時候,根據實際需要,在CFLineChartView的基礎上增加了曲線繪制,和點擊顯示數值的處理。

漸變圖層的繪制,百度了不少資料,可以新建漸變圖層,然后為漸變圖層設置mask路徑即可。

效果圖:

屏幕快照 2017-07-17 下午5.10.42.png

1.簡單計算,確定x,y軸上的均值,以及通過記錄最大Y值,和確定Y軸上最多有幾個點
2.進行X軸和Y軸上的文本顯示處理
3.繪制網格線

- (void)drawLines{
    UIBezierPath *path = [UIBezierPath bezierPath];
    //豎線 兩條
    for (int i = 0; i < 2; i++) {
        [path moveToPoint:CGPointMake(HHLeftMargin+allW*i, HHTopMargin)];
        [path addLineToPoint:CGPointMake(HHLeftMargin+allW*i, HHTopMargin+allH)];
    }
    
    //橫線 包括x軸
    for (int i = 0; i <= yCount; i++) {
        [path moveToPoint:CGPointMake(HHLeftMargin, HHViewSelfHeight-HHBottomMargin-everyY*i)];
        [path addLineToPoint:CGPointMake(HHViewSelfWidth-HHRightMargin, HHViewSelfHeight-HHBottomMargin-everyY*i)];
    }
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.strokeColor = self.gridLineColor.CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 1;
    [self.layer addSublayer:shapeLayer];
}

4.計算點的坐標(可在此步驟進行點的繪制)
5.曲線繪制和漸變填充

- (void)drawCurvePath{
//    [self gradientLayer];
    
    _path = [UIBezierPath bezierPath];
    [_path moveToPoint:[_pointArr[0] CGPointValue]];
    
    for (int i = 1; i < _pointArr.count; i++) {
        CGPoint prePoint = [_pointArr[i-1] CGPointValue];
        CGPoint nowpoint = [_pointArr[i] CGPointValue];
        
        //控制點 x均為兩個點的中點
        CGPoint controlPoint1 = CGPointMake((prePoint.x+nowpoint.x)/2, prePoint.y);
        CGPoint controlPoint2 = CGPointMake((prePoint.x+nowpoint.x)/2, nowpoint.y);
        [_path addCurveToPoint:nowpoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    }
    
}

- (void)drawCurveLine{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = _path.CGPath;
    shapeLayer.strokeColor = self.curveColor.CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 1;
    [self.layer addSublayer:shapeLayer];
}

- (void)drawGradientLayer{
    UIBezierPath *gradientPath = [UIBezierPath bezierPathWithCGPath:_path.CGPath];

    gradientPath.lineWidth = 0.01;
    [gradientPath addLineToPoint:_xendPoint];
    [gradientPath addLineToPoint:_xStartPoint];
    [gradientPath addLineToPoint:[_pointArr[0] CGPointValue]];
    [gradientPath closePath];
    
    
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.bounds;
    NSArray *colors = @[(__bridge id)self.gradientStartColor.CGColor,(__bridge id)self.gradientEndColor.CGColor];
    gradientLayer.colors = colors;
    gradientLayer.locations = @[@0,@1];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1);
    [self.layer addSublayer:gradientLayer];
    _gradientLayer = gradientLayer;
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.strokeColor = [UIColor clearColor].CGColor;
    maskLayer.path = gradientPath.CGPath;
    maskLayer.lineWidth = 0.01;
    //    maskLayer.fillColor = [UIColor whiteColor].CGColor;
    self.gradientLayer.mask = maskLayer;
    
}

5.觸摸時顯示點的視圖添加

demo:https://github.com/HannahZheng/singleChart

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容