IOS端K线系列之分时图-从一个框开始画起

k线系列目录

查看目录请点击这儿

写在前面

如果你还不懂什么叫做分时图、k线之类的，请点击这儿
如果你还不懂CAShapeLayer之类的绘制方法，请点击这儿

在上篇文章中，已经说到如何使用CAShapeLayer来绘制一条线和一个框了。那既然咱们是要做K线框架，就首先从分时图一个简单的框开始做起。

开始搞起

先上效果图：

（ 图1 ）

（ 图2 ）

可能看到效果图会有疑问，为什么两个图的X轴不一样呢？其实第1张图是现货类的分时图，这里默认为24小时交易时间；第2张图是股票类的分时图，标准的4小时交易时间。

有了效果图，仔细想一想可以分为三步搞完：

1. 最外框直接画一个框上去
2. 内框的虚线或者实线可以直接分为横竖2个for循环绘制，当然，如果有自定义需求，比如某条线线宽不一致、颜色不一致，可以在循环体内做判断，也可以单条线绘制
3. 最后把时间当做字符串全放到数组中，循环绘制出来

思路搞定后，上代码：

1、先绘制框

    //初始化一个图层
    CAShapeLayer frameLayer = [CAShapeLayer layer];
    //定义好框的frame
    CGRect frameRect = CGRectMake(frameX, frameY, frameW, frameH);
    //初始化一个路径
    UIBezierPath *framePath = [UIBezierPath bezierPathWithRect:frameRect];

    float unitW = frameW/6;
    float unitH = frameH/4;
    //绘制7条竖线
    for (int i=0; i<7; i++)
    {
        CGPoint startPoint = CGPointMake(frameX + unitW * i, frameY);
        CGPoint endPoint   = CGPointMake(frameX + unitW * i, frameY + frameH);
        [framePath moveToPoint:startPoint];
        [framePath addLineToPoint:endPoint];
    }
    //绘制5条横线
    for (int i=0; i<5; i++)
    {
        CGPoint startPoint = CGPointMake(frameX, frameY + unitH * i);
        CGPoint endPoint   = CGPointMake(frameX + frameW, frameY + unitH * i);
        [framePath moveToPoint:startPoint];
        [framePath addLineToPoint:endPoint];
    }
    //设置路径和各种属性
    frameLayer.path = framePath.CGPath;
    frameLayer.lineWidth = [MYJFGlobalConfig timeLineFrameWidth];
    frameLayer.strokeColor = [UIColor Time_OutBorderLineColor].CGColor;
    frameLayer.fillColor = [UIColor clearColor].CGColor;

这里是直接把框当做每一条线来绘制，如果想要先绘框再绘线，其实也就是在上面用路径描述一个框，绘制完成后，再绘制其余的线。

绘制完线以后，再绘制文字。这里说一下，绘制文字是使用CATextLayer（关于CATextLayer，后续也会分出一篇文章来介绍，这里可以先直接使用）。上代码：

/**
 绘制文字

 @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;
}

写好工具类以后，可以自己编写一个for循环进行绘制。

OK，分时图的框绘制完以后，我们下一步会绘制分时线和背景图，点击这里直接跳转。