前述
我们绘制的分时线因为除了基本的展示功能以外，缺少的还是太多！
比如：长按的话，就会出现价格涨幅、交易量之类的详情
就像这样（绿框标注）：
长按十字叉效果
或是这样（绿框标注）：
长按十字叉效果
怎么样？是不是感觉很清晰？所以，我敢保证，你要是让用户呆呆的看你绘制的分时线。他会喷死你...... 最起码也是毫不犹豫的卸载掉
搞起
既然已经知道后果，就赶紧干活吧！首先要了解需求，再理清思路，再敲代码。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！今天的十字叉效果制作到此为止，其实也说了一些额外效果的制作思路。最后，献上源码，拿走不谢！点这儿。
