折线的绘制

项目中实现的效果需求

• 展示效果图:

  
  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了,如果有需要可以直接交流