东莞网站设计公司淘宝wordpress+企业站模版

贝塞尔曲线的公式推导，和 SVG 中 Path 的贝塞尔曲线指令的理解记忆

贝塞尔曲线可视化：cubic-bezier.com/#.17,.67,.8…
SVG Path 编辑器: yqnn.github.io/svg-path-ed…
知乎转 YouTube 的视频地址: www.zhihu.com/zvideo/1574…
张鑫旭老师：SVG 的贝塞尔曲线指令 www.zhangxinxu.com/wordpress/2…

贝塞尔曲线的公式推导

1. 线性贝塞尔曲线

这个是最基础的运动形成的曲线（其实就是直线）。

个人理解：

求出 P 的位置与 t 之前的关系。 P 是运动的向量的位置， t 是运动的时间。

第一步，明确几个定义，有两个点 P0 和 P1 ，构成一条直线。

然后有第三个点 P ， 点 P 在 P0 和 P1 构成的线段上运动，运动时间为 t .

那么点 P 的位置在 t 时间运动的路径就是贝塞尔曲线。

那么在坐标系中，用向量这样表示

这里有两个向量 P0 和 P1 ，然后还有在 P0 到 P1 上根据时间 t 运动的向量 P 。

那么如何求出 P 的位置。

这里很好理解，不做过多解释。其实第一行公式就不复杂，也很好理解，没有必要化简。但是化简的目的是为了在公式上更直观体现 P 与 (P0 和 P1) 之间的关系。

综上，P(t) = (1-t)P0 + tP1

这里简化表示：lerp(P0, P1, t) ，用 lerp 表示之间的关系。

2. 二次方贝塞尔曲线

其实相比于上一步的 线性贝塞尔曲线 推导，二次方贝塞尔曲线就是多增加了一个向量点。

个人理解：

这里首先还是要明确：已知的是三个向量 P0 、 P1 、 P2 和时间 t 。所要求导的是点 P 的位置与时间的关系。

原来的两个向量点 P0 和 P1 ，现在多增加一个 P2 。然后 P0 和 P1 之间有个向量 P01 随着 t 发生位置改变， P1 和 P2 之间有个向量 P12 也是随着 t 发生位置改变。

这里其实就是两个线性贝塞尔曲线。

由上一步的 线性贝塞尔曲线 推导，我们能知道

P01 = (1-t)P0 + tP1 = lerp(P0, P1, t)

P02 = (1-t)P1 + tP2 = lerp(P1, P2, t)

这样 P01 和 和 P02 的位置就由已知的变量推导转换了，但是到目前 P 还未出场。

那么 P 的位置其实就是在 P01 和 P02 这两个向量之间。

就是可以把当前 P01 当做线性贝塞尔曲线的第一个点， P02 是第二个点， t 还是刚才的那个时间，而 P 的位置则是随着时间在 P01 和 P02 上运动。

那么这个时候就可以得出 P :

P = (1-t)P01 + tP12 = lerp(P01, P12, t)

这里看最初始的计算：

P(t) = (1-t)P01 + tP12
= (1-t)((1-t)P0 + tP1) + t((1-t)P1 + tP2)
= (1-t)^2 * P0 + (1-t) * t * P1 + t * (1-t)*P1 + t^2 * P2
= (1-t)^2 * P0 + 2t(1-t)P1 + t^2 * P2

也是这样简化表达：

P(t) = lerp(P01, P12, t)
= lerp(lerp(P0, P1, t), lerp(P1, P2, t), t)

3. 三次方贝塞尔曲线

三次贝塞尔曲线其实跟上面同理，多一个向量点 P3 ，这里就不赘述了，直接推导。

这里点太多了，所以除了四个已知的向量点 P1 、 P2 、 P3 、 P4 ，其余的几个暂时的点用 ABCDEF 表示，如上图。

A = lerp(P0, P1, t)
B = lerp(P1, P2, t)
C = lerp(P2, P3, t)
D = lerp(A, B, t)
E = lerp(B, C, t)
P = lerp(D, E, t)

当然我们需要的是 P 和 P1 、 P2 、 P3 、 P4 以及 t 之间的关系，这里化简暂时省略了。

也可以直接写出所有点的数学公式

A = (1-t)P0 + tP1
B = (1-t)P1 + tP2
C = (1-t)P2 + tP3
D = (1-t)A + tB
E = (1-t)B + tC
P = (1-t)D + tE

将其完全展开并化简得：

P(t) = P0( -t^3 + 3t^2 - 3t + 1 )
+ P1( 3 * t^3 - 6 * t^2 + 3t)
+ P2( -3 * t^3 + 3 * t^2 )
+ P3( t^3 )

综上推导，其实多次方的贝塞尔曲线始终是其低一级的曲线的 线性贝塞尔曲线。

在求导数的时候，可视化看出来，知道导数的方向，与其垂直的 90 度，也就是与曲线的相切的方向。

而在一阶导数的推导的时候，其实可以看出，就是点的速度。 二阶导数，就是点的速度的变化率，那就是加速度。 三维导数，就是加速度的变化率。

其实，也就是曲率。

K = (det( P', p'')) / ||P'||^3

SVG 路径 Path 的贝塞尔曲线

在 SVG 中的 Path 使用贝塞尔曲线，从张鑫旭老师的文章中学到的记忆方法， “切图组合”和“厕所组合”。

从字面上理解，切图主要是在图，是二维的事情，所以对应是二维贝塞尔曲线。
厕所是三维世界的，所以对应的是三维贝塞尔曲线。

还有就是命令的对应，由上面可知，二维贝塞尔曲线有三个点，三维贝塞尔曲线有四个点。

1. 二维贝塞尔曲线（切图组合 Q）

在 SVG 中，二维贝塞尔曲线对应的指令和参数是：（虚实） 因为是曲线，只显示两个点，所以好理解的是，显示第一个和第四个点。中间的都是控制点不显示。
而二维贝塞尔曲线的第一个点是前面的点，前面的点肯定不受这里影响，肯定会显示。然后最后一个点也肯定是显示，所以在二维贝塞尔曲线的指令中的两个坐标中的第一个是控制点，不会实际显示，第二个是真实点，会显示。

Q x1 y1, x y 

这里只有两个点，分别是第二个点和第三个点，第一个点使用的是前面的那个点。比如

M 0 10 Q 5 5 , 10 10

这里贝塞尔曲线第一个点也就是起始点是 0 10 ，第二个点是 5 5 ，第三个点是 10 10 。

2. 三维贝塞尔曲线（厕所组合 C）

在 SVG 中，三维贝塞尔曲线对应的指令和参数是：（虚虚实）

C x1 y1, x2 y2, x y

这里有三个点，跟上面同理，第一个点使用的是之前的坐标，这里的三个分别是第二、三、四点。 在 SVG 中，因为是曲线只显示两个点，所以其四个点对应的也是显示、不显示、不显示、显示。

而针对三维贝塞尔曲线的指令，更好理解的是，第一个点使用的是前面的那个点，前面的点肯定不受这里影响，肯定会显示。最后一个点也是会显示，所以中间的两个点是不显示的控制点。

示例：

M 0 10 C 0 7 10 13 10 10

来自：贝塞尔曲线的公式推导贝塞尔曲线的公式推导，和 SVG 中 Path 的贝塞尔曲线指令的理解记忆。P(t) = (1-t) - 掘金
https://juejin.cn/post/7282666723902292023