iOS开发之连续平滑曲线图

前言

连续平滑曲线的需求，在项目中经常会遇到，有很多种方式可以画出来，网上也有很多教程，但是总是不能画出自己满意的曲线，无奈最后还是得自己造轮子，这里分享一种平滑曲线图的实现方式，希望可以作为一个合格的砖头，欢迎大家留言交流

思路

这里绘制曲线图用到 CAShapeLayer、UIBezierPath关于贝塞尔曲线，这里不过多介绍。有需求的移步贝塞尔曲线一篇就够了。我们采用3阶贝塞尔曲线来绘制曲线图

连续平滑曲线

连续平滑在数学中的概念就是一阶连续可导，理解起来就是，在锚点的位置，前一段曲线的切线跟后一段曲线的切线共线，在贝塞尔曲线中表现为锚点跟锚点前后两个控制点共线。对于锚点P(i) 用 Pc1(i)、Pc2(i) 表示 P(i-1)-P(i) 之间的三次贝塞尔曲线的两个控制点。则有

 1）Pc2(i)、P(i)、Pc1(i+1) 三点共线，Pc2(i+1)、P(i+1)、Pc1(i+2)三点共线。

为了更好的拟合锚点的走势，我们把 1）中确定的线取与锚点前后点的斜率一致，这样让锚点的走势在曲线的走势中体现出来。即

 2） Pc2(i) - P(i) - Pc1(i+1)  平行于  P(i-1) - P(i+1)

最后只需要确定控制点 x坐标，就可以确定两个控制点了，两锚点x坐标差 stepX = P(i).x - P(i -1).x，两个控制点的x坐标距离锚点的距离在[0-stepX/2] 之间，越小越接近直线，取多少就看个人喜好了。我们取 stepX/3，即

3)  Pc1(i).x = P(i-1)+ (P(i).x - P(i -1).x)/3
    Pc2(i).x = P(i) -  (P(i).x - P(i -1).x)/3

由 1)、2)、3) 即可算出除起止点外的所有锚点的相邻控制点，起止锚点的控制点就取起止点本身。这样就得到了所有锚点和控制点，绘制出来即可。

image

代码

代码的核心就是计算控制点的方法：

-(void)drawCurveLine:(NSArray *)array{
    //曲线图layer
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    layer.frame = CGRectMake(0, 0, self.width, self.height);
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGPoint pc1;//控制点1
    CGPoint pc2;//控制点2
    CGPoint cPoint = CGPointMake(0, 0);//根据P(i-1)~P(i)控制点Pc2 得到P(i)~P(i+1)控制点Pc1
    float rate = 0;//算控制点使用的斜率
    for (int i = 0; i< array.count; i++) {
        CGPoint p2 = [array[i] CGPointValue];//第二个锚点（当前锚点）
        if (i == 0) {
            //路径起点
            [path moveToPoint:p2];
            cPoint = p2;//起点这里的 控制点设为起点本身。
        }else{
            CGPoint p1 = [array[i - 1] CGPointValue];//第一个锚点
            if (i< array.count - 1) {
                //根据当前锚点的 前一个 锚点 和 后一个锚点 算出斜率rate。
                CGPoint p3 = [array[i + 1] CGPointValue];
                rate = (p3.y - p1.y)/(p3.x- p1.x);
            }
            int a = 3;//控制点取 stepWidth/a
            //第一个控制点 根据上一次 的Pc2共线的点得出
            pc1 =  cPoint;
            if (i == array.count - 1) {
                //终点这里的 控制点设为终点本身。
                pc2 = p2;
            }else{
                //第二个控制点、取斜率等于 P(i+1)/P(i-1)
                pc2 = CGPointMake(p2.x - self.stepWidth/a, p2.y - rate*self.stepWidth/a);
            }
            //绘制锚点
            if (!self.anchorPointHiden) {
                [self addPoint:layer array:@[[NSValue valueWithCGPoint:p1],[NSValue valueWithCGPoint:p2]] diam:self.diam color:self.anchorColor];
            }
            //添加曲线路径
            [path addCurveToPoint:p2 controlPoint1:pc1 controlPoint2:pc2];
            //提前计算P(i) 、P(i+1)的第一个控制点，此控制点跟 P(i-1) 、P(i) 的第二个控制点 和P(i) 共线（斜率相同）
            float x = p2.x - pc2.x;
            float y = p2.y - pc2.y;
            cPoint = CGPointMake((x + p2.x), (y + p2.y));
        }
    }
    layer.path = path.CGPath;
    layer.fillColor = nil;
    layer.strokeColor = self.strokeColor.CGColor;
    layer.lineWidth = self.lineWidth;
    [self.layer addSublayer:layer];
}

demo在这里