K线开发之绘制OHLC图、线段、圆形

---

接着上篇文章继续说。在上文中我们把蜡烛绘制完，也讲到在K线中常见的几种图形：

1. 蜡烛
2. OHLC
3. 线段
4. 带状
5. 圆形

那在这篇文章里，我们把其余的也绘制一下，争取做一个基础的类库，这样在开发框架时就可以直接使用。

---

OHLC图

先上两张效果图：

OHLC图 OHLC图

如图所示，它是由4个数据生成：开盘、收盘、最高、最低。中间的线是最高点至最低点连接而成，两边的分别是开盘点和收盘点与中间线连接而成。

OK，知道思路以后，直接上代码：

/**
 生成OHLC

 @param model 蜡烛坐标模型
 @return 返回图层
 */
+ (CAShapeLayer *)getOHLCLayerWithPointModel:(YKCandlePointModel *)model
{
    //判断是否为涨跌
    BOOL isRed = model.oPoint.y >= model.cPoint.y ? YES : NO;
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    //绘制上下影线
    [path moveToPoint:model.lPoint];
    [path addLineToPoint:model.hPoint];
    //开盘线
    [path moveToPoint:model.oPoint];
    [path addLineToPoint:CGPointMake(model.oPoint.x -6, model.oPoint.y)];
    //开盘线
    [path moveToPoint:model.cPoint];
    [path addLineToPoint:CGPointMake(model.cPoint.x +6, model.cPoint.y)];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    
    //判断涨跌来设置颜色
    if (isRed)
    {
        //涨，设置红色
        layer.strokeColor = [UIColor redColor].CGColor;
    } else
    {
        //跌，设置绿色
        layer.strokeColor = [UIColor greenColor].CGColor;
    }
    layer.fillColor = [UIColor clearColor].CGColor;
    
    return layer;
}

单、多条线

效果图：

线段

上图中的淡绿色、粉色、黄色线就是我们所要绘制的，这里再解释一下为什么标题是单、多条线，因为在有的K线指标中规定某一个值是用一条连续的线段表示；但有的指标数值中间会有无效值，那无效值就不会连接，这样的话这条线段就是不连续的，形成多条线。

其实在分时线绘制的时候，也说过如何绘制一条线，这里就不再赘述了，直接上代码：

单条线工具类：

/**
 生成单条线

 @param pointArr 坐标点数组
 @param lineColor 线颜色
 @return 返回线段图层
 */
+ (CAShapeLayer *)getSingleLineLayerWithPointArray:(NSArray *)pointArr lineColor:(UIColor *)lineColor
{
    UIBezierPath *path = [UIBezierPath getBezierPathWithPointArr:pointArr];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.lineWidth = 1.f;
    layer.strokeColor = lineColor.CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    
    return layer;
}

多条线工具类：

/**
 生成包含多条线的线段

 @param pointArr 坐标点数组
 @param lineColor 线颜色
 @return 返回线段图层
 */
+ (CAShapeLayer *)getMultipleLineLayerWithPointArray:(NSArray *)pointArr lineColor:(UIColor *)lineColor
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    for (int idxX=0; idxX<pointArr.count; idxX++)
    {
        NSArray *idxXArr = pointArr[idxX];
        
        [path moveToPoint:[[idxXArr firstObject] CGPointValue]];
        for (int idxY=1; idxY<idxXArr.count; idxY++)
        {
            [path addLineToPoint:[idxXArr[idxY] CGPointValue]];
        }
    }
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.lineWidth = 1.f;
    layer.strokeColor = lineColor.CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    
    return layer;
}

圆形

接下来是圆形，圆形就比较简单了，就是那么一个单纯的圆。只是在开发中，一般都是由多个圆形成一定的趋势。

这里直接上代码：

/**
 生成圆

 @param point 圆心坐标
 @param color 圆颜色
 @return 返回图层
 */
+ (CAShapeLayer *)getCircleLayerWithPoint:(CGPoint )point color:(UIColor *)color
{
    //直接用圆描述路径
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:point radius:3.f startAngle:0.f
  endAngle:(CGFloat)M_PI * 2 clockwise:true];
    //生成图层 并设置路径和属性
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.fillColor = color.CGColor;
    layer.strokeColor = color.CGColor;
    
    return layer;
}

带状

这里要说明一下，带状这种图形用文字叙述不清楚，需要结合实际的数据才能理解。所以这里就先不写Demo，等到后面我们在框架中接入实际数据了，再详述。

绘制效果

上面光发代码了，这里把最后的运行结果发上来：

运行结果

需要源码的点击这里。