本文是衔接上篇关于绘制分时图框的内容,如果你还不了解关于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上传以供大家参考。
网友评论