iOS 沿曲线线性渐变的贝塞尔曲线

更新：换一种思路实现。iOS 沿曲线线性渐变的贝塞尔曲线（改进版）

iOS原生的渐变只支持线性的渐变，但有的时候我们需要沿曲线进行渐变。
先看下垂直线性渐变与沿曲线线性渐变的区别

垂直线性渐变：颜色最亮的地方在曲线的最低点
沿曲线线性渐变：颜色最亮的地方在起点

那么先来分析一下这个问题：

1. 怎样绘制曲线？
   对于贝塞尔曲线的绘制，系统提供了一系列的方法，同时我们已可以通过公式计算出一条贝塞尔曲线。
2. 如何保证颜色渐变？
   找到曲线上的点，计算出每一个点的色值。

只要解决上面的问题就可以画出一条沿曲线线性渐变的贝塞尔曲线，曲线画起来还是比较简单的，但是这样计算出每一点的色值是一件比较麻烦的事情。

1、贝塞尔曲线

这里先介绍一下贝塞尔曲线的一些东西，以二次贝塞尔曲线为例，先来动态感受一下绘制过程

二次贝塞尔曲线

一条二次贝塞尔曲线需要三个点，A：起点 ；B：控制点；C：终点

然后在AB上取点E，在BC上取点F 。使AD:AB = BE:BC

第一次取点

在DE上取点F，使DF:DE = AD:AB = BE:BC

第二次取点

F点就是贝塞尔曲线上的一个点，以此类推，取点一系列的点之后在ABC之间就产生了一条贝塞尔曲线

贝塞尔曲线

可以看出贝塞尔曲线上的每个点是有规律的，二次贝塞尔曲线的方程为
P0:起点；P1:控制点； P2:终点 ；t:百分比

二次贝塞尔曲线的方程

用OC表达的话就是这样的

CGFloat x = pow((1-t), 2) * _startPoint.x + 2 * (1-t) * t * _controlPoint.x + pow(t, 2) * _endPoint.x;
CGFloat y = pow((1-t), 2) * _startPoint.y + 2 * (1-t) * t * _controlPoint.y + pow(t, 2) * _endPoint.y;

2、渐变色

既然已经一颗贝塞尔曲线的方程，那就可以操作曲线上的每一个点了，那怎么设置每一个点的颜色的。

1、取点

对于取点还有一个问题需要注意，由于贝塞尔曲线并不是匀速变化的，所有如果均匀分割 t 来进行取点的话，取出来的点是不均匀的。不均匀的点会造成有的地方缺失点，形成空白。所以需要对 t 进行修正，取出间隔均匀的点。

均匀间隔的 t
想要均匀的点，就需要线计算出曲线长度，接下来就使用辛普森积分法来计算曲线的长度。这个求的是二次贝塞尔曲线的长度，如果需更高次的曲线，可修改一下修改。

//曲线长度
- (CGFloat)lengthWithT:(CGFloat)t{
    NSInteger totalStep = 1000;
    
    NSInteger stepCounts = (NSInteger)(totalStep * t);
    
    if(stepCounts & 1) stepCounts++;
    
    if(stepCounts==0) return 0.0;
    
    NSInteger halfCounts = stepCounts/2;
    CGFloat sum1=0.0, sum2=0.0;
    CGFloat dStep = (t * 1.0)/stepCounts;
    for(NSInteger i=0; i<halfCounts; i++) {
        sum1 += [self speedAtT:(2*i+1)*dStep];
    }
    
    for(NSInteger i=1; i<halfCounts; i++) {
        sum2 += [self speedAtT:(2*i)*dStep ];
    }
    return ([self speedAtT:0]+[self speedAtT:1]+2*sum2+4*sum1)*dStep/3.0;
}

- (CGFloat)speedAtT:(CGFloat)t {
    CGFloat xSpeed = [self xSpeedAtT:t];
    CGFloat ySpeed = [self ySpeedAtT:t];
    CGFloat speed = sqrt(pow(xSpeed, 2) + pow(ySpeed, 2));
    return speed;
}

- (CGFloat)xSpeedAtT:(CGFloat)t {
    return 2 * (_startPoint.x + _endPoint.x - 2 * _controlPoint.x) * t + 2 * (_controlPoint.x - _startPoint.x);;
}

- (CGFloat)ySpeedAtT:(CGFloat)t {
    return 2 * (_startPoint.y + _endPoint.y - 2 * _controlPoint.y) * t + 2 * (_controlPoint.y - _startPoint.y);
}

- (CGFloat)xAtT:(CGFloat)t {
    CGFloat x = pow((1-t), 2) * _startPoint.x + 2 * (1-t)* t * _controlPoint.x + pow(t, 2) * _endPoint.x;
    return x;
}

- (CGFloat)yAtT:(CGFloat)t {
    CGFloat y = pow((1-t), 2) * _startPoint.y + 2 * (1-t) * t * _controlPoint.y + pow(t, 2) * _endPoint.y;
    return y;
}

接下里就就开始矫正间隔了

//矫正间隔
- (CGFloat)uniformSpeedAtT:(CGFloat)t {
    CGFloat totalLength = [self lengthWithT:1.0];
    CGFloat len = t*totalLength; 
    CGFloat t1=t, t2;
    do {
        t2 = t1 -([self lengthWithT:t1] - len)/[self speedAtT:t1];
        if(fabs(t1-t2)<0.001) break;
        t1=t2;
    }while(true);
    return t2;
}

矫正间隔的取点

加上颜色，就是这样了

均匀的渐变色点

接下来就是要去足够多的点来连成曲线了，这个取点的个数要根据具体情况来定，
考虑到线的边界问题，处理起来太费事了，要进行更多的色值计算

曲线的边界

我的做法是先按线段长度取点，然后再根据每个点的速度及方向进行上下左右偏移，得到一条宽度足够的线之后在进行mask裁剪。

偏移得到足够宽的线
最终效果

这个取点的方案还不是很完善，先放个demo吧至少效果是出来了，可以看一下具体的样子。

---

下面的文章给了我很多的帮助，有需要的同学可以去看一下
匀速贝塞尔曲线运动（续）
一分钟就懂贝塞尔曲线
Bezier - 匀速贝塞尔曲线运动的实现
动态绘制贝塞尔曲线的在线演示