由画K线引发的思考

最近兴趣所致，想看看股票App中的K线是怎么画的，了解到画K线有好几种方案。本来一开始考虑到用Core Graphics重绘来绘制，但发现网上很多的解决方案都是用了CAShapeLayer来实现，比较少采用CG来重绘实现。故因此对这两种方案的实现区别探究一下。

画K线大概只有以下这三种方案：

• 通过subView添加
• 通过Core Graphics绘制
• 通过CAShapeLayer绘制
• 通过subView添加
• 这种方式是最粗暴的，直接把每个K线当成一个控件，直接通过addSubView添加进去。这种方案优点是操作简单，使用门槛低。但缺点也非常明显，性能非常低下，内存占用太多。

通过Core Graphics绘制

这种方法的思路不错，每次数据或显示发生变化时，重新绘制整个绘制区域。这个方案的优点很明显，相对subView来说的低内存占用，性能也还可以。但是有个很明显的缺点：CPU占用太多容易造成卡顿。 为什么会有这个问题？ 举个例子，对于一个1024 1024的绘制的区域来说，其每次重绘区域大小是是1024 1024 * 4 字节 = 4 MB。也就是说每次重绘都需要重新刷新4MB的内存空间，这对于CPU来说是压力不少的，特别是对于比较大的重绘来说，非常容易产生卡顿。这个主要是由于Core Graphics绘的是Bitmap，内存占用比较大，而且使用CPU来绘制，绘图效率比较低下。

通过CAShapeLayer绘制

这种方案是为了解决CG方案的缺点的。

• CAShapeLayer绘制的是矢量图，相比CG的bitmap来占用内存少很多。而且一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形(bitmap?)，所以无论有多大，都不会占用太多的内存。而且由于是矢量图，不会造成像素失真
• CAShapeLayer使用GPU硬件加速，相对使用CPU的CG来说快上不少

总结

看了以上三个方案后，由于要显示大量K线行情，所以不可能才有方案一。由于要在一个小屏幕上显示大量K线，而且每个K线又比较小，例如显示百日K线行情这种业务情况下，使用CG后每次刷新数据容易卡顿，所以方案二不是一种比较好的解决方案。而方案三内存占用少，又使用GPU加速，对于这种业务场景来说是比较合适的，所以可以看到很多开源画K线的项目都是使用CAShapeLayer这种方案的。

后记

以前写博客老是想着要写点有技术含量的东西，现在想来这种想法有点问题。博客这本质，更应该是记录所想所学，而不是仅仅为了展示自己所谓的有技术含量的东西，如果都是为了展示，那为了写一篇“充满技术含量的文章”，会充满痛苦，而且写出来的，一般都不满意。与其这样，不如看到什么，整理一下，记录下来，说不定，以后就变成“有技术含量”了呢？

转载于:https://juejin.im/post/5d63acafe51d4561a9185096