k线系列目录
查看目录请点击这儿
提出问题
记得曾经有一个脑筋急转弯:
问:如何把大象装进冰箱里?
答:总共分三步(1)把冰箱门开起来(2)把大象推进去(3)把冰箱门关上
虽然是一个笑话,但是从另一种角度来讲也是一种解决问题的思路。2008年北京奥运会作为一个大型项目,时长持续8年之久,可是项目的过程也仅仅只分为五个过程组:
(1)启动过程组(2)规划过程组(3)执行过程组(4)监控过程组(5)收尾过程组
那对于我们的主题:分时图,其实也可以这样看待。如何绘制一张分时图,如果你看过前面几篇的文章(没看过的点这儿),心里应该会有个大体的过程:
- 绘制分时图的边框
- 绘制分时图的X轴时间点
- 绘制价格区间标识
- 绘制分时线
- 绘制均线
- 绘制呼吸灯
完成6个步骤,那一个分时图就已经绘制完成。
开始搞起
有了思路,就开始干活!虽然在前几篇文章中有说过一些绘制的方法,这里就再说一次,权当复习。
(一)绘制分时图边框
要实现的效果是一个6 * 4 方格的边框,如下图:
那就是说,我们分两个for循环,来完成横向7条线、竖向5条线的绘制工作。上代码!
CGRect rect = CGRectMake(frameX, frameY, frameW, frameH);
UIBezierPath *framePath = [UIBezierPath bezierPathWithRect:rect];
CAShapeLayer *layer = [CAShapeLayer layer];
float unitW = frameW/6;
float unitH = frameH/4;
//绘制7条竖线
for (int idx=0; idx<7; idx++)
{
CGPoint startPoint = CGPointMake(frameX + unitW * idx, frameY);
CGPoint endPoint = CGPointMake(frameX + unitW * idx, frameY + frameH);
[framePath moveToPoint:startPoint];
[framePath addLineToPoint:endPoint];
}
//绘制5条横线
for (int idx=0; idx<5; idx++)
{
CGPoint startPoint = CGPointMake(frameX, frameY + unitH * idx);
CGPoint endPoint = CGPointMake(frameX + frameW, frameY + unitH * idx);
[framePath moveToPoint:startPoint];
[framePath addLineToPoint:endPoint];
}
//设置图层的属性
layer.path = framePath.CGPath;
layer.lineWidth = 0.5f;
layer.strokeColor = [UIColor colorWithRed:220.f/255.f green:220.f/255.f blue:220.f/255.f alpha:1.f].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
(二)绘制分时图的X轴时间点
框绘制完成以后,就开始绘制边框最下方的时间点,由于现货类K线框架默认交易时间为24小时,所以时间也设置为6.01至6.00。这样的话,每4个小时一个方格,共需要绘制7个时间点。代码如下:
//坐标点数组
NSArray *timePointArr = @[@"06:01", @"10:00", @"14:00", @"18:00", @"22:00", @"02:00", @"06:00"];
NSDictionary *attribute = @{NSFontAttributeName:[UIFont systemFontOfSize:9.f]};
CGRect strRect = [self rectOfNSString:@"0