6.贝塞尔曲线的数学原理.md

贝塞尔曲线的数学原理

我相信所有射鸡师们都知道贝塞尔曲线是什么，习惯用PS的会用钢笔工具，习惯用AI的会用贝塞尔，因为它所绘制出来的曲线很容易受我们控制也很美观，那么接下来我们来深入了解一下这个贝塞尔曲线的数学原理和公式。

在数学中，贝塞尔又分为很多种，一阶贝塞尔曲线、二阶贝塞尔曲线、三阶贝塞尔曲线····等等等等，除了一阶贝塞尔是直线外剩下的多阶贝塞尔都是抛物线。而它又由起点、终点和控制点组成，根据控制点的个数和位置决定这个曲线的最终样式。

原理

我们先在一个平面内任选 3 个不共线的点，依次用线段连接。如图

在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD，与该线段总长 AB 的比例。

根据上一步得到的比例，从第二条线段上找出对应的点 E，使得 AD:AB = BE:BC。

连接这两点 DE。

从新的线段 DE 上再次找出相同比例的点 F，使得 DF:DE = AD:AB = BE:BC。

到这里，我们就确定了贝塞尔曲线上的一个点 F。接下来，请稍微回想一下中学所学的极限知识，让选取的点 D 在第一条线段上从起点 A 移动到终点 B，找出所有的贝塞尔曲线上的点 F。所有的点找出来之后，我们也得到了这条贝塞尔曲线。

想象不出?没关系，看动画

那么，我们已经大概了解到贝塞尔绘制出来的过程了，下面看公式

1.一阶贝塞尔

一阶贝塞尔只有起点和终点，并没有控制点，所以绘制出来的图形仅仅只是一条直线，那么在时间t为1秒的情况下的公式如下

$ B(t)=(1-t)P_0+tP_1 ,t\in[0,1] $

2.二阶贝塞尔

二阶贝塞尔只存在一个控制点，此时从起点到终点的线段发生变化，具体的变化是由控制点的位置而改变的，图中绿色的线段为红色曲线的切线

$B(t) = (1-t)^2P_0+2t(1-t)P_1+t^2P_2,t\in[0,1]$

仅仅只是简单的一元二次方程式

3.高阶贝塞尔

• 三阶

• 四阶

• 五阶

从三阶开始贝塞尔就显得复杂了，高阶的通用公式如下 $$ P_i^k=(1-t)P_i^{k-1}+tP_{i+1}^{k-1}$$

$$k=1,2,···,n$$

$$i=0,1,···,n-k$$

可以通过链接动态绘制多阶贝塞尔曲线DEMO

SVG绘制贝塞尔

为什么选用SVG而不选择Canvas是因为演示起来简单，而且SVG对矢量图形的渲染更好，也就更适合拿来做几何图形的描绘，而Canvas适合游戏等比较大的渲染

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

</svg>

结果如图