写在前面
如果你还不懂什么叫做分时图、k线之类的，请点击这儿
如果你还不懂CAShapeLayer之类的绘制方法，请点击这儿
在上篇文章中，已经说到如何使用CAShapeLayer来绘制一条线和一个框了。那既然咱们是要做K线框架，就首先从分时图一个简单的框开始做起。
开始搞起
先上效果图：
(图1)现货类效果图
(图2)股票类效果图
可能看到效果图会有疑问，为什么两个图的X轴不一样呢？其实第1张图是现货类的分时图，这里默认为24小时交易时间；第2张图是股票类的分时图，标准的4小时交易时间。
有了效果图，仔细想一想可以分为三步搞完：
- 最外框直接画一个框上去
- 内框的虚线或者实线可以直接分为横竖2个for循环绘制，当然，如果有自定义需求，比如某条线线宽不一致、颜色不一致，可以在循环体内做判断，也可以单条线绘制
- 最后把时间当做字符串全放到数组中，循环绘制出来
思路搞定后，上代码：
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。上代码：
/**
绘制文字
@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循环进行绘制就可以完成需求。
