K线开发之分时图十字叉效果

前述

我们绘制的分时线因为除了基本的展示功能以外，缺少的还是太多！
比如：长按的话，就会出现价格涨幅、交易量之类的详情

就像这样（绿框标注）：

长按十字叉效果

或是这样（绿框标注）：

长按十字叉效果

怎么样？是不是感觉很清晰？所以，我敢保证，你要是让用户呆呆的看你绘制的分时线。他会喷死你...... 最起码也是毫不犹豫的卸载掉

搞起

既然已经知道后果，就赶紧干活吧！首先要了解需求，再理清思路，再敲代码。OK！那先分析：
十字叉效果其实是获取用户长按手势以后。出现一个横竖两条线，横线两侧显示价格和百分比，竖线上或者下显示时间。然后再屏幕其他地方显示价格详情，为了方便理解，上图一副：

十字叉演示

了解完需求，再理清思路：

 1. 通过长按手势获取长按的坐标点longPressPoint(X，Y)
 2. 通过坐标点的x值计算用户按的坐标点接近于哪个分时点
 3. 根据这个分时点直接取对应的坐标timePoint(X, Y)
 4. 根据这个坐标绘制横竖线
 5. 根据这个分时点对应的模型数据，分别绘制价格、百分比、时间、详情

有了思路，直接上代码：

1、获取长按坐标点

- (void)timeChartLongGestureAction:(UILongPressGestureRecognizer *)longGesture
{
    if (longGesture.state == UIGestureRecognizerStateBegan || longGesture.state == UIGestureRecognizerStateChanged)
    {//第一次长按获取 或者 长按然后变化坐标点
        
        //获取坐标
        CGPoint point = [longGesture locationInView:_timeChartView];
        
        float x = 0.f;
        float y = 0.f;
        //判断临界情况
        if (point.x < 0)
        {
            x = 0.f;
        }else if (point.x > CGRectGetWidth(_timeChartView.frame))
        {
            x = CGRectGetWidth(_timeChartView.frame);
        }else
        {
            x = point.x;
        }
        if (point.y < 0)
        {
            y = 0.f;
        }else if (point.y > (CGRectGetHeight(_timeChartView.frame) - 20.f))
        {
            y = CGRectGetHeight(_timeChartView.frame) - 20.f;
        }else
        {
            y = point.y;
        }
        
        //开始绘制十字叉
        [_timeChartView drawTicksWithPoint:CGPointMake(x, y)];
        
    } else
    {//事件取消
        
        //当抬起头后，清理十字叉
        [_timeChartView clearTicks];
    }
}

2、计算分时点

    //根据坐标计算索引
    float unitW = CGRectGetWidth(self.frame) / 1440;
    int index = (int)(point.x / unitW);
    if (index >= self.timeCharModelArr.count)
    {
        index = (int)self.timeCharModelArr.count - 1;
    }
    YKTimeLinePointModel *pointModel = self.pointArr[index];

3、绘制横竖线

    UIBezierPath *path = [UIBezierPath bezierPath];
    //竖线
    [path moveToPoint:CGPointMake(pointModel.linePoint.x, 0)];
    [path addLineToPoint:CGPointMake(pointModel.linePoint.x, CGRectGetHeight(self.frame)-timePointH)];
    //横线
    [path moveToPoint:CGPointMake(0, pointModel.linePoint.y)];
    [path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), pointModel.linePoint.y)];
    //设置横竖线的属性
    self.ticksLayer.path = path.CGPath;
    self.ticksLayer.lineWidth = 1.f;
    self.ticksLayer.strokeColor = [UIColor blackColor].CGColor;
    self.ticksLayer.fillColor = [UIColor clearColor].CGColor;

4、绘制价格、百分比

    //生成时间方块图层
    YKCAShapeLayer *timeLayer = [YKCAShapeLayer getRectLayerWithRect:maskTimeRect dataRect:timeRect dataStr:timeStr fontSize:9.f textColor:[UIColor whiteColor] backColor:[UIColor blackColor]];
    //生成价格方块图层
    YKCAShapeLayer *priceLayer = [YKCAShapeLayer getRectLayerWithRect:maskPriceRect dataRect:priceRect dataStr:priceStr fontSize:9.f textColor:[UIColor whiteColor] backColor:[UIColor blackColor]];
    //生成百分比方块图层
    YKCAShapeLayer *perLayer = [YKCAShapeLayer getRectLayerWithRect:maskPerRect dataRect:perRect dataStr:perStr fontSize:9.f textColor:[UIColor whiteColor] backColor:[UIColor blackColor]];
    //把3个图层全部添加到十字叉图层中
    [self.ticksLayer addSublayer:timeLayer];
    [self.ticksLayer addSublayer:priceLayer];
    [self.ticksLayer addSublayer:perLayer];

5、绘制详情

绘制详情和绘制价格、百分比的步骤是一样的。也是在屏幕的某处绘制一个方块，然后在方块里面把数据绘制上去就可以了。由于过程太重复，这里就不贴这部分代码。

接下来看最终的效果：

十字叉

怎么样？还是不错的吧。在有的app上或许会有这样的效果（红框标注）：

财经日历标识效果

当用户手滑到某一个时间点时，正好这个时间点有一个财经事件要发生。此时就会有一个绿色的框来标识。

像这之类的效果，都是在上面第2步，计算出分时点后，判断当前分时点是否包含财经时间。如果包含的话，就把事件绘制出来。over！今天的十字叉效果制作到此为止，其实也说了一些额外效果的制作思路。最后，献上源码，拿走不谢！点这儿。