在进行曲线图渐变图层绘制的时候,根据实际需要,在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.触摸时显示点的视图添加