MyEyes项目开发日记之二

MyEyes项目中比较有特点的功能之一，就是根据用户长期使用的记录生成视力变化曲线图，以便用户可以更加直观的看到被测试者视力变化的趋势。

功能描述很简单，但这个看似简单的功能可能会扩大潜在的用户群，比如用于年轻父母对自己孩子从小开始的视力变化的关注，有助于预防孩子近视发生。

基于这个初衷，应用中添加了视力折线图的功能。

简单效果如下图：

                            

iOS平台上折线图的描画，是有开源的第三方开发包的，常用的有tapkulibrary等

源码地址： http://github.com/devinross/tapkulibrary/wiki/How-To-Use-This-Library 

功能很强大，但使用略为复杂一些

但如果只是简单的折线图，其实使用CoreGraphic.Framework里提供的基本函数就可以很方便的实现 

例如：

    CGContextRef contextLeft = UIGraphicsGetCurrentContext();
    //设置线的颜色
    CGContextSetStrokeColorWithColor(contextLeft, [UIColor blueColor].CGColor);
    //设置线的宽度
    CGContextSetLineWidth(contextLeft, 4.0f);
    //设置线的起始点
    CGContextMoveToPoint(contextLeft, 25.0f, 16.0f);
    //设置线的终点
    CGContextAddLineToPoint(contextLeft, 70.0f, 16.0f);
    CGContextStrokePath(contextLeft);

出于学习的考虑，MyEyes的开发选择了第二种方案。

简单的说，处理流程如下：

1. 描画横坐标，确定合适的时间间隔

    由于视力的变化不是一朝一夕的事情，所以短时间内以便视力不会有明显的下降或者上升，因此横坐标的时间间隔可以适当放长

    MyEyes中，横轴以一周为一个坐标单位 

2. 描画纵坐标，纵坐标用来显示视力等级评分

    处于用户体验的考虑，纵坐标的评分被设计成为了国内国际2种视力评分标准的表示，相互间可以切换

3. 描画视力检查历史数据

   区分左右眼的数据，根据每次测试的结果，重复使用CGContextMoveToPoint或者CGContextAddLineToPoint描绘出视力变化线

4. 为折线图添加拖动功能

    视力的变化是一个长期的过程，手机的屏幕宽度有限，当用户长期使用该应用时，记录的时间跨度可能比较长，因此折线图必须要可以拖动，以方便用户查看 

    这里的实现方式是使用了UIVIewController的Touch delegate

    具体实装了以下2个方法：

    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 

    - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event 

    通过实时计算用户手势点之间的距离，动态的计算出折线图中当前应当表示的各个点的位置，并及时重绘折线图，已达到拖动折线图的效果。

通过以上步骤，就实现了一个比较简单的视力折线变化图。