在上篇 在坐标系中绘制数据曲线 文章中,有人问如何在曲线下面加入渐变颜色,我尝试了一下,采用CAShapeLayer ,CAGradientLayer组合可以,修改上一次的代码,如下:
-(void)setupUI
{
_isNeedDisplayXData = YES;
_isNeedDisplayYData = YES;
_coordinateBackgroundImgView = [[UIImageView alloc] init];
[self addSubview:_coordinateBackgroundImgView];
_shapeLayer = [CAShapeLayer layer];
_shapeLayer.fillColor = [UIColor blackColor].CGColor;
_shapeLayer.strokeColor = [UIColor clearColor].CGColor;
_greadientlayer = [CAGradientLayer layer];
_greadientlayer.colors = @[(id)[UIColor colorWithRed:30/255.0 green:50/255. blue:60/255. alpha:1.0].CGColor,(id)[UIColor colorWithRed:50/255.0 green:90/255. blue:50/255. alpha:1.0].CGColor,(id)[UIColor colorWithRed:20/255.0 green:90/255. blue:50/255. alpha:1.0].CGColor,(id)[UIColor colorWithRed:120/255.0 green:10/255. blue:30/255. alpha:1.0].CGColor];
[self.layer addSublayer:_greadientlayer];
_greadientlayer.mask = _shapeLayer;
_curveShapeLayer = [CAShapeLayer layer];
_curveShapeLayer.lineWidth = 1;
_curveShapeLayer.fillColor = [UIColor clearColor].CGColor;
if (!_curveColor) {
_curveColor = [UIColor brownColor];
}
_curveShapeLayer.strokeColor = _curveColor.CGColor;
[self.layer addSublayer:_curveShapeLayer];
}
-(void)drawDataImg
{
if (!_dataArrary || _dataArrary.count <=0) {
return;
}
dispatch_queue_t queue = NULL;
if (_isDynamicRefreshData) {
//创建串行队列
if(!_queue)
{
_queue = dispatch_queue_create("com.draw.dataImg", DISPATCH_QUEUE_SERIAL);
}
queue = _queue;
}
else
{
queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
}
dispatch_async(queue, ^{
// UIGraphicsBeginImageContext(_shapeLayer.frame.size);
// CGContextRef context = UIGraphicsGetCurrentContext();
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
CGPoint point = [_dataArrary[0] CGPointValue];
CGFloat xLength = _shapeLayer.frame.size.width;
CGFloat yLength = _shapeLayer.frame.size.height;
CGFloat xValue = point.x;
CGFloat yValue = point.y;
[[UIColor clearColor] setFill];
if (!_curveColor) {
_curveColor = [UIColor whiteColor];
}
[_curveColor setStroke];
// CGContextFillEllipseInRect(context, _shapeLayer.bounds);
[bezierPath moveToPoint:CGPointMake((xValue / _xMaxData) * xLength, yLength - (yValue / _yMaxData ) * yLength)];
for (NSValue *value in _dataArrary)
{
point = [value CGPointValue];
xValue = point.x;
yValue = point.y;
[bezierPath addLineToPoint:CGPointMake((xValue / _xMaxData) * xLength, yLength - (yValue / _yMaxData ) * yLength)];
}
// CGContextAddPath(context, bezierPath.CGPath);
// CGContextDrawPath(context, kCGPathFillStroke);
//
//
// CGContextFillPath(context);
_dataDispalyImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIBezierPath *orgPath = [UIBezierPath bezierPathWithCGPath:bezierPath.CGPath];
point = [_dataArrary[_dataArrary.count - 1] CGPointValue];
xValue = point.x;
yValue = point.y;
[bezierPath addLineToPoint:CGPointMake((xValue / _xMaxData) * xLength, yLength)];
[bezierPath addLineToPoint:CGPointMake(0, yLength)];
dispatch_async(dispatch_get_main_queue(), ^{
_curveShapeLayer.path = orgPath.CGPath;
_shapeLayer.path = bezierPath.CGPath;
});
});
}
运行结果:
88.mov_1455935452.gif
网友评论