iOS股票K线图、分时图绘制

怼烎@ 2024-04-17 22:23 12阅读 0赞

### 介绍： ###

*  这是以`雪球APP`为原型，基于 `iOS`的K线开源项目。
 *  该项目整体设计思路已经经过某成熟证券APP的商业认证。
 *  本项目将K线业务代码尽可能`缩减`，`保留核心功能`，可流畅、高效实现手势交互。
 *  K线难点在于手势交互和数据动态刷新上，功能并不复杂，关键在于设计思路。

### 演示： ###

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNDI1MjUwLTNiYjllZmUzYTQyNzdjMjMuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjI1L2Zvcm1hdC93ZWJw][]

K线演示文档.gif

### 建议： ###

*  如果搭建K线为公司业务，不建议采用集成度高的开源代码。庞大臃肿，纵然短期匆忙上线，难以应付后期灵活需求变更。

`Objective-C`版请移步 [https://github.com/cclion/CCLKLineChartView][https_github.com_cclion_CCLKLineChartView]  
`Swift`版请移步 [https://github.com/cclion/KLineView][https_github.com_cclion_KLineView] 。

### 设计思路&&难点： ###

K线难点在于手势的处理上，`捏合、长按、拖拽`都需要展示不同效果。以下是Z君当时做K线时遇到的问题的解决方案；

1. 捏合手势需要动态改变K线柱的宽度，对应的增加或减少当前界面K线柱的展示数量,并且根据当前展示的数据计算出当前展示数据的极值。

采用`UITableView`类实现，将K线柱封装在`cell`中，在`tableview`中监听捏合手势，对应改变`cell`的高度，同时刷新`cell`中K线柱的布局来实现动态改变K线柱的宽度。

采用`UITableView`还有一个好处就是可以采用`cell`的重用机制降低内存。

注意：因为`UITableView`默认是上下滑动，而K线柱是左右滑动，Z君这里将`UITableView`做了一个顺时针90°的旋转。

![format_png][]

tableView旋转90°

2. K线柱绘制

K线柱采用`CAShapeLayer`配合`UIBezierPath`绘制，内存低，效率高，棒棒哒！

关于CAShapeLayer的使用大家可以看这篇[https://zsisme.gitbooks.io/ios-/content/chapter6/cashapelayer.html][https_zsisme.gitbooks.io_ios-_content_chapter6_cashapelayer.html]  
（现在的google、baidu，好文章都搜不到，一搜全是简单调用两个方法就发的博客，还是翻了两年前的收藏才找到这个网站，强烈推荐大家）

3. 捏合时保证捏合中心点不变，两边以捏合中间点为中心进行收缩或扩散

因为`UITableView`在改变`cell`的高度时，默认时不会改变偏移量，所以不能保证捏合的中心点不变，这里我们的小学知识就会用上了。

![format_png 1][]

捏合时状态.png

我们可以通过变量定义控件间距离。

![format_png 2][]

捏合前后.png

保证捏合中心点的中K线柱的中心点还在捏合前，就需要`c1 = c2` ，计算出`O2`，在捏合完，设置偏移量为`O2`即可。

![format_png 3][]

计算偏移量.png

4. K线其他线性指标如何绘制

在K线中除了K线柱之外，还有其他`均线指标`，连贯整个数据显示区。

![format_png 4][]

线性指标

由图可以看出均线指标由每个`cell`中心点的数据连接相邻的`cell`中心点的数据。我们依旧将绘制放在`cell`中，将相连两个`cell`的线分割成两段，分别在各自所属的`cell`中绘制。

需要我们做的就是就是在cell中传入相邻的`cell`的`soureData`，计算出相邻中点的位置，分为两段绘制。

![format_png 5][]

分割绘制

--------------------

大家针对K线有什么问题都可以在下面留言，会第一时间解答。  
未完待续

[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNDI1MjUwLTNiYjllZmUzYTQyNzdjMjMuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjI1L2Zvcm1hdC93ZWJw]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNDI1MjUwLTNiYjllZmUzYTQyNzdjMjMuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjI1L2Zvcm1hdC93ZWJw
[https_github.com_cclion_CCLKLineChartView]: https://github.com/cclion/CCLKLineChartView
[https_github.com_cclion_KLineView]: https://github.com/cclion/KLineView
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNDI1MjUwLTJiOTJiN2NjZTAyNjhlZTIucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[https_zsisme.gitbooks.io_ios-_content_chapter6_cashapelayer.html]: https://zsisme.gitbooks.io/ios-/content/chapter6/cashapelayer.html
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNDI1MjUwLWRjNzRiOTdlOWNjNjdmYzUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvOTEwL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNDI1MjUwLWVlZjE4MDJlZmRkZGNjNjEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNDI1MjUwLTFlNTY5MDVlZGUzOThmMTQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTc2L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNDI1MjUwLWZkNmQxMmQyYzY5YTJkYmUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTE0Mi9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNDI1MjUwLWFlNjdhYjJmMDQzNWJlMTQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png