mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-25 17:42:46 +02:00
4a29eee0fd
* localize wiki links/add 07
* Revert "localize wiki links/add 07"
This reverts commit 9156b32601.
revert
* localize wiki links/add 07
29 lines
2.4 KiB
Markdown
29 lines
2.4 KiB
Markdown
# 什么构成了贝塞尔曲线？
|
||
|
||
操作点的移动，看看曲线的变化，可能让你感受到了贝塞尔曲线是如何表现的。但贝塞尔曲线究竟*是*什么呢？有两种方式来解释贝塞尔曲线，并且可以证明它们完全相等，但是其中一种用到了复杂的数学，另外一种比较简单。所以...我们先从简单的开始吧：
|
||
|
||
贝塞尔曲线是[线性插值](https://zh.wikipedia.org/wiki/%E7%BA%BF%E6%80%A7%E6%8F%92%E5%80%BC)的结果。这听起来很复杂，但你在很小的时候就做过线性插值：当你指向两个物体中的另外一个物体时，你就用到了线性插值。它就是很简单的“选出两点之间的一个点”。
|
||
|
||
如果我们知道两点之间的距离，并想找出离第一个点20%间距的一个新的点(也就是离第二个点80%的间距)，我们可以通过简单的计算来得到：
|
||
|
||
\[
|
||
Given \left (
|
||
\begin{aligned}
|
||
p_1 &= some\ point \\
|
||
p_2 &= some\ other\ point \\
|
||
distance &= (p_2 - p_1) \\
|
||
ratio &= \frac{percentage}{100} \\
|
||
\end{aligned}
|
||
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
|
||
\]
|
||
|
||
让我们来通过实际操作看一下：下面的图形都是可交互的，因此你可以通过上下键来增加或减少插值距离，来观察图形的变化。我们从三个点构成的两条线段开始。通过对各条线段进行线性插值得到两个点，对点之间的线段再进行线性插值，产生一个新的点。最终这些点——所有的点都可以通过选取不同的距离插值产生——构成了贝塞尔曲线：
|
||
|
||
<Graphic title="Linear Interpolation leading to Bézier curves" setup={this.setup} draw={this.draw} onKeyDown={this.onKeyDown}/>
|
||
|
||
这为我们引出了复杂的数学：微积分。
|
||
|
||
虽然我们刚才好像没有用到这个，我们实际上只是逐步地画了一条二次曲线，而不是一次画好。贝塞尔曲线的一个很棒的特性就是它们可以通过多项式方程表示，也可以用很简单的插值形式表示。因此，反过来说，我们可以基于“真正的数学”（检查方程式，导数之类的东西），也可以通过观察曲线的“机械”构成（比如说，可以得知曲线永远不会延伸超过我们用来构造它的点），来看看这些曲线能够做什么。
|
||
|
||
让我们从更深的层次来观察贝塞尔曲线。看看它们的数学表达式，从这些表达式衍生得到的属性，以及我们可以对贝塞尔曲线做的事。
|