项目中实现的效果需求
-
展示效果图:
IMG_3424.PNG - 切换不同的按钮绘制不同的折线图
- 当手指左右滑动的时候,展示点的数据
- 在零点,可能存在负数,零点不是坐标Y轴坐标为1的时候
- 每个点对应一个气泡视图,并且展示它数据
实现的思路
- 首先是处理数据,让整个数组中最大的值为Y轴的顶点,最小的值为Y轴的0点(可能包含负数)
- 因为绘制的点和左右上下都是有边距的,所有是两层视图,一次是整体的白色视图,一层是装载贝塞尔曲线的白色视图
- 折线在每一次数据重新复制都要移除前面的点:
// 删除重新绘制
if (_linePath) {
[_linePath removeAllPoints];
}
- 而每一个圆圈使用的是CAShaperLayer的数组去装载,去移除:
屏幕快照 2017-07-24 10.25.29.png
- 绘制所有的点,是放在处理数组转换成点的循环中绘制的:
屏幕快照 2017-07-24 10.25.40.png
- UIView继承的是UIResponder,所以主要的滑动实现依赖于下面的协议:
屏幕快照 2017-07-24 10.32.30.png
- 协议中实现对气泡视图尖角的设置,项目实现是距离视图20pt,但是在左右两个极端的时候需要处理,避免尖角不在对应的点上
气泡视图
气泡视图建议不要覆写drawRect,数据太多,不停的点击一下子内存就会疯长,容易崩溃
使用贝塞尔曲线来绘制,从尖角开始,使用贝塞尔曲线绘制圆角和直线就可以了
因为这个折线视图耦合在项目中了,所以就没有单独写成demo了,如果有需要可以直接交流
