理解贝塞尔曲线并应用「Android」

定义

在数学的数值分析领域中，贝塞尔曲线（Bézier curve）是计算机图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝塞尔曲面，其中贝塞尔三角是一种特殊的实例。

贝塞尔曲线于1962年，由法国工程师皮埃尔·贝兹（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由保尔·德·卡斯特里奥于1959年运用德卡斯特里奥算法开发，以稳定数值的方法求出贝塞尔曲线。

贝塞尔曲线在平面绘图中有着广泛的应用，一般的矢量图形软件通过它来精确画出曲线。贝塞尔曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

如何绘制贝塞尔曲线

线性（一阶）贝塞尔曲线

一阶贝塞尔曲线函数中的t会经过由P₀至P₁的B(t)所描述的曲线。例如当t=0.25时，B(t)即一条由点P₀至P₁路径的四分之一处。就像由0至1的连续t，B(t)描述一条由P0至P1的直线。

对于一阶贝塞尔曲线，可以很容易根据t的值得出线段上那个点的坐标：

$B\; 1\; (\; t\; )\; =\; P\; 0\; +\; (\; P\; 1\; -\; P\; 0\; )\; t\; B\_\{1\}(t)\; =\; P\_0\; +\; (P\_1\; -\; P\_0)t$B1(t)=P0+(P1−P0)t

然后可以得出：

$B\; 1\; (\; t\; )\; =\; (\; 1\; -\; t\; )\; P\; 0\; +\; t\; P\; 1\; ,\; t\; \in$ 0 , 1 B_{1}(t) = (1 - t)P_0 + tP_1,t\in0,1 B1(t)=(1−t)P0+tP1,t∈0,1

我们说的应该是曲线啊，这这这不是直线么？！！先别着急，我们一般说的贝塞尔曲线都不是这种，但是要把曲线绘制出来都离不开它，我们接着往下看。

二阶曲线

这便是最常见的一个标准的二阶贝塞尔曲线，它由三个点 P₀、P₁、P₂组成，其中 P₀、P₂ 为起点或终点，P₁ 为 控制点 ,Q₀Q₁为中介点。我们来看看应该怎么绘制这种曲线。

• 首先我们需要三个点：P₀,P₁,P₂,并连接 P₀P₁ 和 P₁P₂

• 在P₀P₁和P₁P₂两条线上分别找到两个点Q₀、Q₁，并使等式 $P\; 0\; Q\; 0\; P\; 0\; P\; 1\; =\; P\; 1\; Q\; 1\; P\; 1\; P\; 2\; \backslash frac\{P\_0Q\_0\}\; \{P\_0P\_1\}=\backslash frac\{P\_1Q\_1\}\{P\_1P\_2\}$P0P1P0Q0=P1P2P1Q1成立，连接Q₀Q₁

• 在 Q0Q1 上找到一个点T,并使 $P\; 0\; Q\; 0\; Q\; 0\; P\; 1\; =\; P\; 1\; Q\; 1\; Q\; 1\; P\; 2\; =\; Q\; 0\; T\; Q\; 0\; Q\; 1\; \backslash frac\{P\_0Q\_0\}\; \{Q\_0P\_1\}=\backslash frac\{P\_1Q\_1\}\{Q\_1P\_2\}=\backslash frac\{Q\_0T\}\{Q\_0Q\_1\}$Q0P1P0Q0=Q1P2P1Q1=Q0Q1Q0T

到这一步我们便找到了贝塞尔曲线上的一个点，剩下我们要做的工作就是找到所有上述符合条件的点，便可以绘制出贝塞尔曲线，如下图：

我们来看看是怎么收集这些点的

|-----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
| | |

结合这两张图我们可以看出来 B 点的变化是由 Q₀ 和 Q₁ 两个点共同影响的，这三个点在做同一件事，就是在同一时间内由起点移动到终点，有点区别的是 Q₀Q₁ 这个线段在不断变化。最终点 B 的运动过程就形成了贝塞尔曲线，到这里大家应该就能明白了吧。

总结一下，为建构二次贝塞尔曲线，可以中介点Q₀和Q₁作为由 0 至 1 的 t：

• 由P₀至P₁的连续点Q₀，描述一条线性贝塞尔曲线。
• 由P₁至P₂的连续点Q₁，描述一条线性贝塞尔曲线。
• 由Q₀至Q₁的连续点B(t)，描述一条二次贝塞尔曲线。

无论多少阶的贝塞尔曲线，它的绘制过程都会进行降阶，四阶降三阶直至降到一阶

三阶及更高阶曲线

三阶贝塞尔曲线

这是一个三阶曲线，正如上文所说，高阶曲线绘制会有一个降阶的一个过程，我们来分析下，是怎样的过程。

1. 三阶曲线有四个点P₀、P₁、P₂、P₃，连接相邻的点便有三条边P₀P₁、P₁P₂、P₂P₃
2. 在三条边上取三个中介点 Q₀、Q₁、Q₂,与二阶曲线一样满足 $P\; 0\; Q\; 0\; P\; 0\; P\; 1\; =\; P\; 1\; Q\; 1\; P\; 1\; P\; 2\; =\; P\; 2\; Q\; 2\; P\; 2\; P\; 3\; \backslash frac\{P\_0Q\_0\}\; \{P\_0P\_1\}=\backslash frac\{P\_1Q\_1\}\{P\_1P\_2\}=\backslash frac\{P\_2Q\_2\}\{P\_2P\_3\}$P0P1P0Q0=P1P2P1Q1=P2P3P2Q2，设它们的比值为 $U\; U$U
3. 连接Q₀Q₁、Q₁Q₂，并在两条边上取两点 R₀、R₁,连接R₀R₁取一点B,需要满足
   $Q\; 0\; R\; 0\; Q\; 0\; Q\; 1\; =\; Q\; 1\; R\; 1\; Q\; 1\; R\; 2\; =\; R\; 0\; B\; R\; 0\; R\; 3\; =\; U\; \backslash frac\{Q\_0R\_0\}\; \{Q\_0Q\_1\}=\backslash frac\{Q\_1R\_1\}\{Q\_1R\_2\}=\backslash frac\{R\_0B\}\{R\_0R\_3\}=U$Q0Q1Q0R0=Q1R2Q1R1=R0R3R0B=U，这个点 B 即为三阶曲线的其中一点
4. 找到所有满足上述条件的点，便是三阶贝塞尔曲线

这时候细心的人变发现，第3步之后不就是二阶曲线的流程吗？确实是，不同的是二阶曲线的两条边是固定的，而此处 Q₀、Q₁、Q₂是中介点，所以会不断变化。

来看看三阶曲线的绘制过程吧：

三阶贝塞尔曲线

于是乎，此处我们可以得出一个结论：n阶曲线可近似理解为由n个一阶曲线与（n-1）阶曲线相互作用而成。

四阶贝塞尔曲线

五阶贝塞尔曲线

在 Android Canvas 里绘制贝塞尔曲线

二阶贝塞尔曲线

在 Android 上绘制曲线一般会用路径工具 Path 来处理，Path 基本可以绘制出任何你想要的线条。所以贝塞尔曲线也不例外，可以通过 Paht#quadTo方法来实现：

/**
 * Add a quadratic bezier from the last point, approaching control point
 * (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for
 * this contour, the first point is automatically set to (0,0).
 *
 * @param x1 The x-coordinate of the control point on a quadratic curve
 * @param y1 The y-coordinate of the control point on a quadratic curve
 * @param x2 The x-coordinate of the end point on a quadratic curve
 * @param y2 The y-coordinate of the end point on a quadratic curve
 */
public void quadTo(float x1, float y1, float x2, float y2) {
    nQuadTo(mNativePath, x1, y1, x2, y2);
}

参数是两个点：控制点和结束点。要绘制一个二阶曲线可以这样：

val path = Path()
path.moveTo(pointA.x, pointA.y)
path.quadTo(pointB.x, pointB.y, pointC.x, pointC.y)

canvas.drawPath(path,paint)

这样便绘制了一个二阶的贝塞尔曲线

三阶贝塞尔曲线

/**
 * Add a cubic bezier from the last point, approaching control points
 * (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been
 * made for this contour, the first point is automatically set to (0,0).
 *
 * @param x1 The x-coordinate of the 1st control point on a cubic curve
 * @param y1 The y-coordinate of the 1st control point on a cubic curve
 * @param x2 The x-coordinate of the 2nd control point on a cubic curve
 * @param y2 The y-coordinate of the 2nd control point on a cubic curve
 * @param x3 The x-coordinate of the end point on a cubic curve
 * @param y3 The y-coordinate of the end point on a cubic curve
 */
public void cubicTo(float x1, float y1, float x2, float y2,
                    float x3, float y3) {
    nCubicTo(mNativePath, x1, y1, x2, y2, x3, y3);
}

三阶贝塞尔曲线可以用此方法绘制，三阶曲线有两个控制点，方法参数前两对为控制点位置，最后一对为中点位置，那我们绘制一下：

val path = Path()
path.moveTo(pointA.x, pointA.y)
path.cubicTo(pointB.x, pointB.y, pointC.x, pointC.y, pointD.x, pointD.y)

canvas.drawPath(path,paint)

以上就是 Android Canvas 绘制二阶、三阶曲线的方法，那如果想绘制更多阶的曲线呢？很不幸，Path 只支持二阶、三阶的贝塞尔曲线绘制，因为多阶的曲线用得确实很少。如果确实有需求，那就需要自己去计算曲线轨迹了，社区里有开源支持，本文就不在赘述了。