https://medium.com/@rdfuhr/exploring-bezier-and-spline-curves-a8261b3c7a8b
貝塞爾曲線和樣條曲線以及曲面廣泛用于汽車和飛機的設(shè)計中。Bezier曲線以較小的比例表示字母的形狀，包括您現(xiàn)在正在閱讀的本文所使用的字體定義。
這是我開發(fā)的交互式Web應(yīng)用程序的鏈接，使您可以瀏覽Bezier和樣條曲線的某些屬性。
https://richardfuhr.neocities.org/BusyBCurves.html
本文的目的是提供對該應(yīng)用程序的介紹，并描述您將看到的曲線的一些數(shù)學(xué)特性。
為了最好地理解本文和應(yīng)用程序，您應(yīng)該對多項式的概念相當(dāng)滿意。例如，三次多項式的形式為f（x）=ax3+bx2+ cx + d。您還應(yīng)該熟悉平面中參數(shù)曲線的概念，該曲線可以以C（t）=（x（t），y（t））的形式編寫。
貝塞爾曲線是參數(shù)曲線，通常為2D或3D。在這里，我們將研究2D曲線。因此，貝塞爾曲線可以寫成
C（t）=（x（t），y（t））
另一個要求是x（t）和y（t）是多項式。在這里，我們將研究多項式的次數(shù)等于3的情況，我們稱這些三次 貝塞爾曲線。最后的要求是，x（t）和y（t）不能以我們在高中時學(xué)到的熟悉的形式表達：at3+bt2+ ct + d，而應(yīng)以相當(dāng)隱秘的形式表達
x（t）= X0 * B0（t）+ X1 * B1（t）+ X2 * B2（t）+ X3 * B3（t）
y（t）= Y0 * B0（t）+ Y1 * B1（t）+ Y2 * B2（t）+ Y3 * B3（t）
哪里
B0（t）=（1-t）3
B1（t）= 3（1-t）2* t
B2（t）= 3 （1-t）t2
B3（t）=t3
和B0（t），B1（t），B2（t），B3（t）被稱為3級伯恩斯坦多項式。事實證明，這些伯恩斯坦多項式構(gòu)成了所有三次多項式空間的基礎(chǔ)，這意味著每個三次方都可以唯一表示為四個伯恩斯坦多項式的線性組合。
我們可以將上面的（Xi，Yi）表示為平面中的Pi點，這樣
貝塞爾曲線C（t）=（x（t），y（t））可以寫成
C（t）= P0 * B0（t）+ P1 * B1（t）+ P2 * B2（t）+ P3 * B3（t）
如果這看起來有點令人生畏，那是可以的，但是為了使用Bezier曲線，并不需要理解數(shù)學(xué)的所有細節(jié)。導(dǎo)出所有潛在的數(shù)學(xué)特性也不是本文的目的。關(guān)于這個主題有很多書。如果您在應(yīng)用程序中單擊“幫助”，則將提供指向某些Wikipedia文章的鏈接。
您可能仍然在問：為什么我們要用這些相對模糊和混亂的函數(shù)B0，B1，B2和B3代表高中時期的老式的熟悉的三次多項式？
好吧，事實證明，當(dāng)我們以這種方式表示C（t）時，就控制點 P0，P1，P2和P3以及伯恩斯坦多項式B0，B1，B2和B3而言，則是計算和圖形鍛煉得很好。例如，可以以有效且穩(wěn)定的方式計算沿曲線的點。而且，曲線的形狀直接且直觀地與控制點的位置相關(guān)。
此實現(xiàn)是由雷諾（Renault）的皮埃爾·貝濟耶（PierreBézier）和雪鐵龍（Citro?n）的保羅·德·卡斯特爾喬（Paul de Casteljau）分別獨立和同時完成的
一幅圖片價值1000個單詞，一個動畫價值1000個圖片，因此當(dāng)您運行應(yīng)用程序，啟動動畫或直接操縱控制點P0，P1，P2和P3時，所有這些都將變得更加清晰。
啟動Web應(yīng)用程序時，您看到的第一個屏幕將類似于以下所示。
[圖片上傳中...(image-a6a9ba-1587975570681-1)]
[圖片上傳中...(image-851e6a-1587975570681-3)]
<figcaption class="ci ei ht hu hv cq co cp hw hx cd eh" data-selectable-paragraph="" style="box-sizing: inherit; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; color: rgba(0, 0, 0, 0.54); margin-left: auto; margin-right: auto; max-width: 728px; font-weight: 300; font-size: 16px; line-height: 1.4; margin-top: 10px; text-align: center;">貝塞爾曲線</figcaption>
對于初學(xué)者，請單擊“開始動畫”按鈕，查看四個藍色控制點如何隨著紅色曲線（貝塞爾曲線）上的黃色點沿曲線來回移動而擴展和收縮。
這里要記住的最重要的一點是，黃點始終位于四個藍色圓圈的重心處。
四個藍色圓圈旁邊的綠色小圖是四個三次Bernstein多項式的圖，四個藍色圓圈的面積由相應(yīng)的Bernstein多項式的當(dāng)前值控制。
查看動畫后，嘗試通過單擊并拖動一個圓來操縱控制點或曲線上的點。您可以通過單擊“幫助”按鈕獲得更多信息。
在嘗試了一段時間的Bezier曲線后，單擊標(biāo)為Spline的單選按鈕，您將看到一個類似于下圖的屏幕。
[圖片上傳中...(image-af0026-1587975570681-0)]
[圖片上傳中...(image-71d698-1587975570681-2)]
<figcaption class="ci ei ht hu hv cq co cp hw hx cd eh" data-selectable-paragraph="" style="box-sizing: inherit; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; color: rgba(0, 0, 0, 0.54); margin-left: auto; margin-right: auto; max-width: 728px; font-weight: 300; font-size: 16px; line-height: 1.4; margin-top: 10px; text-align: center;">樣條曲線</figcaption>
您在此處看到的是三次樣條曲線的圖形，它類似于三次貝塞爾曲線，只是更復(fù)雜。這次，紅色曲線不是由三次曲線參數(shù)多項式組成，而是由五個（在這種情況下）單獨的三次參多項式組成，它們在由小黑色矩形表示的位置處相互連接。對應(yīng)于這些連接點的參數(shù)值稱為結(jié)。
另外，這次，不是四個控制點，而是八個！但是，對于曲線上黃點的每個位置，八個控制點中只有四個確定黃點的位置，如白圈內(nèi)的藍色圓圈區(qū)域所表示。
要查看實際效果，請單擊“開始動畫”按鈕，觀察藍色圓圈的膨脹和收縮，并且藍色圓圈的面積始終由函數(shù)的值確定，這些函數(shù)的圖形在相應(yīng)的控制點圓圈旁邊。這些功能稱為B樣條曲線。
與簡單的貝塞爾曲線一樣，在樣條曲線的情況下，黃點始終位于四個藍色圓圈的重心處。這次，將始終有四個圓圈不參與控制黃點的位置。但是，當(dāng)您更改參數(shù)值時，所有圓圈都有機會參與，這可以通過動畫或直接拖動黃點看到。
許多人為計算機圖形學(xué)和其他領(lǐng)域的樣條線的發(fā)展做出了貢獻。據(jù)我所知，艾薩克·斯科伯格（Isaac Schoenberg）是第一個使用“樣條線”作為該數(shù)學(xué)對象的名稱的人，使用了可以彎曲并用來彎曲的柔性木制或金屬條（也稱為樣條線）的名稱。繪制平滑曲線。Schoenberg開發(fā)了很多樣條曲線的基本理論。后來，卡爾·德布爾（Carl de Boor）開發(fā)了當(dāng)今使用的許多算法，他的著作《樣條線實用指南》（A Practical Guide to Splines）涵蓋了該理論的不可思議的細節(jié)。
由于該應(yīng)用程序是網(wǎng)絡(luò)應(yīng)用程序，因此應(yīng)在大多數(shù)臺式機和筆記本電腦上的大多數(shù)瀏覽器上運行，并運行Windows，macOS，Linux和ChromeOS。它還應(yīng)在平板電腦和智能手機上運行。
該應(yīng)用程序的網(wǎng)址為https://richardfuhr.neocities.org/BusyBCurves.html
我使用HTML5和TypeScript的組合編寫了此Web應(yīng)用程序。如果您能夠在瀏覽器中查看應(yīng)用程序的源代碼，則將看到從TypeScript生成的JavaScript。SVG是否是實現(xiàn)此類應(yīng)用程序的可行替代方案？我不知道。
如果您對此有任何想法或其他疑問，請在下面的評論部分中發(fā)布。
謝謝！
