美文网首页
K线开发之绘制分时线和背景区域

K线开发之绘制分时线和背景区域

作者: nethanhan | 来源:发表于2017-10-14 13:47 被阅读0次

    本文是衔接上篇关于绘制分时图框的内容,如果你还不了解关于K线图、分时图的相关知识,可以点击这儿

    需求确定

    在上篇文章中,我们已经把分时图的框和坐标文字全部画好,如下:

    分时图边框

    那现在就需要把分时线和背景绘制上去,效果如下:

    分时线

    开始搞起

    需求既然已经确定,那我们就来分解需求。其实仔细观察效果图,就可以发现分时线只是一条由多个点连成的线,而下面的背景区域是一个封闭区间,封闭区间是由上方的线、起始两个坐标点、X轴上与起始坐标点相同X值的两个坐标点组成,为了方便理解,直接上图:

    分时线Demo

    在上图中,分时线为从起点(startPoint)到终点(endPoint)连接的一条线,而封闭区间为startPoint至endPoint、xEndPoint、xStartPoint所形成的闭合区间。

    有了思路,我们就开始敲代码了,如下:

        //分时线图层
        CAShapeLayer tLineLayer = [CAShapeLayer layer];
        //背景区域图层
        CAShapeLayer fillColorLayer = [CAShapeLayer layer];
        //用于模拟的坐标点数组
        NSArray *pointArr = [NSArray array];
        //描述分时图的路径
        UIBezierPath *timeLinePath = [UIBezierPath bezierPath];
        CGPoint startPoint = [[pointArr firstObject] CGPointValue];
        //向路径中添加分时线
        [timeLinePath moveToPoint:startPoint];
        for (int idx=1; idx<pointArr.count; idx++)
        {
            CGPoint point = [pointArr[idx] CGPointValue];
            [timeLinePath addLineToPoint:point];
        }
        //设置分时线图层的各种属性
        tLineLayer.path = timeLinePath.CGPath;
        tLineLayer.lineWidth = 0.5f;
        tLineLayer.strokeColor = [UIColor blueColor].CGColor;
        tLineLayer.fillColor = [UIColor clearColor].CGColor;
        
        //继续向路径中添加下面两个点 形成闭合区间
        [timeLinePath addLineToPoint:xEndPoint];
        [timeLinePath addLineToPoint:xStartPoint];
        //设置背景区域图层的各种属性
        fillColorLayer.path = timeLinePath.CGPath;
        //这里注意,填充颜色要有一定的透明度
        fillColorLayer.fillColor = [UIColor blueColor].CGColor;
        fillColorLayer.strokeColor = [UIColor clearColor].CGColor;
        //设置图层的位置,防止覆盖
        fillColorLayer.zPosition -= 1;
    

    ok,到这里,我们已经把分时图大部分元素绘制完成,现在还差的就是把左侧的价格和右侧的百分比绘制上去。那继续搞!

    绘制价格和百分比其实和绘制x轴的时间坐标文字一致,再次把绘制文字的工具类贴上:

    /**
     绘制文字
     
     @param text 字符串
     @param textColor 文字颜色
     @param bgColor 背景颜色
     @param frame 文字frame
     @return 返回textLayer
     */
    - (CATextLayer *)getTextLayerWithString:(NSString *)text
                                  textColor:(UIColor *)textColor
                                   fontSize:(NSInteger)fontSize
                            backgroundColor:(UIColor *)bgColor
                                      frame:(CGRect)frame
    {
        //初始化一个CATextLayer
        CATextLayer *textLayer = [CATextLayer layer];
        //设置文字frame
        textLayer.frame = frame;
        //设置文字
        textLayer.string = text;
        //设置文字大小
        textLayer.fontSize = fontSize;
        //设置文字颜色
        textLayer.foregroundColor = textColor.CGColor;
        //设置背景颜色
        textLayer.backgroundColor = bgColor.CGColor;
        //设置对齐方式
        textLayer.alignmentMode = kCAAlignmentCenter;
        //设置分辨率
        textLayer.contentsScale = [UIScreen mainScreen].scale;
        
        return textLayer;
    }
    

    这里注意,左侧价格最中间的价格为当前交易品的昨日收盘价,所以两侧的价格都是按照中间的价格相对求出来的,具体规则为:

    if(ABS(当前分时线中最大值 - 昨日收盘价)) >= (ABS(昨日收盘价-当前分时线中最小值))
    {
        最上侧价格 = 当前分时线中最大值;
        最下侧价格 = 昨日收盘价 - ABS(当前分时线中最大值 - 昨日收盘价);
    }else
    {
        最上侧价格 = 昨日收盘价 + ABS(昨日收盘价-当前分时线中最小值);
        最下侧价格 = 当前分时线中最小值;
    }
    

    上方的最大值、最小值都是遍历当前要展示的分时线价格得出来的,也就是求所有价格的max、min。

    如果不懂上方说的昨日收盘价之类的,可以在开发中向后台要这样的字段。

    ok,至此我们已经把分时图画好,效果如下:

    现货分时图

    上图是现货类的效果,股票类的效果如下(注意不包含那条黄色的线):

    股票分时图

    如果遇到各种坑,或者觉得有一定难度,其实也没关系,后面我会把demo上传以供大家参考。

    相关文章

      网友评论

          本文标题:K线开发之绘制分时线和背景区域

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