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 *)texttextColor:(UIColor *)textColorfontSize:(NSInteger)fontSizebackgroundColor:(UIColor *)bgColorframe:(CGRect)frame
{//初始化一个CATextLayerCATextLayer *textLayer = [CATextLayer layer];//设置文字frametextLayer.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上传以供大家参考。

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

IOS端K线系列之分时图-整体搭建
k线系列目录查看目录请点击这儿提出问题记得曾经有一个脑筋急转弯: 问:如何把大象装进冰箱里? 答:总共分三步(1)把冰箱门开起来(2)把大象推进去(3)把冰箱门关上虽然是一个笑话,但是从另一种 ...
IOS端K线系列之K线-绘制蜡烛图
k线系列目录查看目录请点击这儿补充知识 K线虽然看上去复杂,但仔细观察就会知道几乎所有的k线无非由以下几种组成: (1)蜡烛 (2)OHLC (3)线段 (4)带状 (5)圆形除此之外还有其他的 ...
IOS端K线系列之K线、OHLC线、分时线基础知识
k线系列目录查看目录请点击这儿本文主要介绍在IOS端开发K线框架时所需要的一些最基础的知识.包括对股票.现货的不同,对蜡烛(又称K线).OHLC线.分时图的详细叙述.如有不足或者纰漏,可随时拍砖评 ...
IOS端K线系列之K线-边框绘制、滑动选择
k线系列目录查看目录请点击这儿在分时线写完以后,我们开始接着学习如何写K线.其实k线并没有想象的那么复杂,还是像前几篇文章提供的思路一样,第一步.第二步.第三步--.把一个复杂的问题简单化,才是我 ...
iOS 股票K线图、分时图
前言:以下是博主2016年在做iOS研发时,在某书上发的,搬到CSDN上来,后续会将当时构建的思考逻辑发上来. iOS 股票K线图.分时图,基本上翻遍了开源的项目,要不就是只分享了分时图没有k线纯粹一 ...
matlab计算macd_matlab股市图k线 matlab画macd图
我们在进行均线操盘时常会用到k线走势图以及分时图来综合的判断未来股市的趋势走向.以便于能够及时的做出相应的调整.我们在k线形态图已经明白怎么去做止盈.那么对于分时图而言,投资如何在这里面利用均价线做止 ...
iOS 股票K线图绘制
本文来自简书,原文地址:http://www.jianshu.com/p/f7906f5b4f4c 最近一段时间写了一个iOS的K线图.写这个纯属个人兴趣,正好提高一下自己绘图方面的能力.在写的时候, ...
移动端-K线图-开发
首先了解点基本的K线图的参数: K线图(CandlestickCharts)又称蜡烛图.日本线.阴阳线.棒线等,常用说法是"K线",起源于日本十八世纪德川幕府时代(1603-186 ...
IOS 股票K线图的实现
2015-09-04 by 木易哥哥智者精选,每天获取励志认知能量 www.5izhjx.com 写了lines.RKLineView.getData三个对象完成实现. 首先开始调用 rkLine ...

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

k线系列目录

需求确定

开始搞起

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

最新文章

热门文章