美文网首页
在坐标系中绘制数据曲线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

    在上篇 在坐标系中绘制数据曲线 文章中,有人问如何在曲线下面加入渐变颜色,我尝试了一下,采用CAShapeLaye...

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

    昨晚睡觉时qq聊天中看见别人的截图,截图内容为健康类app运动数据的展示截图,在坐标系中展示曲线数据,感觉很炫,今...

  • Proe/Creo建模实例教程——关系式和扫描的应用

    一、使用方程来创建曲线 1、依次点击:基准>曲线>来自方程的曲线。 2、使用笛卡尔坐标系,参考坐标系选默认坐标系。...

  • 第52天 blender曲线知识补充

    日常工作需求,也是对之前曲线认知的补充 曲线绘制,还是使用AI比较顺手。 工作流程就是: 1、在AI中绘制曲线形状...

  • iOS 渐变色绘制

    1、layer 层绘制 2、贝塞尔绘制曲线 3、

  • 疫情自动更新软件

    目前仅支持电脑版, 软件功能有: 1) 国内实时数据 2) 国内历史数据 3) 绘制曲线 4) 国内各省/市数据 ...

  • roc曲线的绘制

    ROC曲线的绘制在结合SKLEARN中运用就非常的便捷。 加载模块 加载数据和数据分类 这里可有可无,看实际的运用...

  • 使用sklearn画二分类模型ROC曲线,PR曲线

    1. 在digits数据集上训练模型 2. 使用plot_roc_curve函数绘制ROC曲线 3. 使用roc_...

  • circos 学习手册(二十)

    2D 数据绘制(一) 2D 数据的绘制语法与 link 类似,在 块中每个 块定义一个图形,包括绘制格式以...

  • 杂项

    1.判断是否已经引入某个类 2.iOS 绘制曲线UIResponder 的touch moved方法中,使用点绘制...

网友评论

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

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