IOS端K线系列之分时图-绘制分时线和背景区域

k线系列目录

查看目录请点击这儿

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

需求确定

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

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

开始搞起

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

在上图中，分时线为从起点（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上传以供大家参考。