美文网首页
在坐标系中绘制数据曲线2

在坐标系中绘制数据曲线2

作者: jiangamh | 来源:发表于2016-02-19 23:34 被阅读73次

    在上篇 在坐标系中绘制数据曲线 文章中,有人问如何在曲线下面加入渐变颜色,我尝试了一下,采用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

    相关文章

      网友评论

          本文标题:在坐标系中绘制数据曲线2

          本文链接:https://www.haomeiwen.com/subject/jsjvkttx.html