初識貝塞爾曲線

MasonEast 發布于2019-08-29 17:07 / 2784人閱讀

摘要：貝塞爾曲線被廣泛用于制圖軟件中。多邊二次貝塞爾曲線可以看到有兩個控制點，這樣連續畫出來了。如果前一個曲線不存在，當前點就是第一個控制點在中使用繪制二次貝塞爾曲線，參數分別為控制點和終點的值。繪制三次貝塞爾曲線。

貝塞爾曲線在CSS動畫中和canvas、svg繪圖中都是比較重要的一個東西！所以我來好好的小結一下關于它的一些東西。

什么是貝塞爾曲線

貝塞爾曲線于1962，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發表，他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由Paul de Casteljau于1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。

貝塞爾曲線被廣泛用于制圖軟件中。
以前描述曲線并沒有很好的方法，直到它的出現。
如果你用過PS、AI之類的制圖軟件，想必一定會很好理解。

你可以登錄https://bezier.method.ac/這個網站，在線學習體驗使用PS中的鋼筆工具，進行繪制各種形狀的圖案。

二次貝塞爾曲線

二次貝塞爾曲線，我們要繪制出來需要指定：

起點

終點

控制點

我們可以看到如圖所示，在控制點和起點的中點，連接上了控制點與終點的中點，這根線的終點，就是與曲線相交的一個點。
可以認為控制點像一個磁鐵一樣，把線吸了過去。

多邊二次貝塞爾曲線
可以看到有兩個控制點，這樣連續畫出來了。
如果想要連貫的曲線，那么它們的控制點應該是中心對稱的。

三次貝塞爾曲線

三次貝塞爾曲線可以包括一個拐點。
它擁有兩個控制點，兩個控制點中間的中點，分別連接控制點與起點、終點的連線的中點。這兩根線的中點分別相連接，這個中點就是和曲線相交的地方（有點繞，看圖就明白了！）

這一般也是繪圖軟件里常用的：

應用 在CSS中的應用

我們可以指定動畫的運動曲線。在CSS中運用的也是三次貝塞爾曲線。

cubic-bezier(控制點x1, 控制點y1, 控制點x2, 控制點y2)

這個代表的是速度曲線，也就是y值是速度，可以看到粉紅色和藍色的圓點就是兩個控制點：

而我們CSS中內置的一些默認的屬性值，實際上是存了貝塞爾曲線的一些預設:

更多可以在：貝塞爾CSS在線體驗這里進行體驗。

SVG

在SVG中定義一個二次貝塞爾曲線，用字母Q來表示，緊跟控制點和終點坐標：

意思是，我們繪制一條路徑，先把點Move（M）移動到(30, 75)的位置，然后開始繪制！
以(240, 30)為控制點，曲線的終點是(300, 120)。

如果我們要繪制多邊二次貝塞爾曲線，直接在Q后面繼續跟兩組坐標：

Q 80 30, 100 100, 130 65, 200 80

比如這組數據，就是在(100, 100)畫完一邊后，繼續以(130, 65)為控制點，畫到(200, 80)為終點。

然后，我們提到之前的中心對稱問題，可以直接使用T字母來表示中心對稱的控制點。

Q 80 30, 100 100, T, 200 80

如果我們要繪制三次貝塞爾曲線，后面跟著的坐標組就有3個，分別就是起點的控制點、終點的控制點和端點（終點）。用字母C來開頭指定。

M20 80, C 50 20, 150 60, 200 120

另外還有字母S開頭，S x2 y2 x y，表示用x2 y2作為控制點，第一個控制點是前一個C命令的終點控制點的中心對稱點。（如果前一個曲線不存在，當前點就是第一個控制點）

canvas

在canvas中使用quadraticCurveTo繪制二次貝塞爾曲線，參數分別為控制點和終點的x,y值。

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20)"
ctx.stroke();

bezierCurveTo繪制三次貝塞爾曲線。參數為起點控制點、終點控制點和終點的x、y值。

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)"
ctx.stroke();

最后

本文是根據自己的一些小積累和資料查找總結出來的，如果有錯誤歡迎指正^_^，謝謝。

云服務器 GPU云服務器貝塞爾曲線貝塞爾曲線詳解貝塞爾曲線整理 docker初識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114112.html

用canvas繪制一個曲線動畫——深入理解貝塞爾曲線

摘要：實現這樣一個曲線動畫可以點擊這里查看在線演示在寫代碼之前，先了解一下什么是貝塞爾曲線吧。繪制二次貝賽爾曲線路徑這樣就完成了基本的繪制二次貝塞爾曲線的方法了。我的github博客地址 https://github.com/hujiulong/... 前言在前端開發中，貝賽爾曲線無處不在：它可以用來繪制曲線，在svg和canvas中，原生提供的曲線繪制都是使用貝賽爾曲線它也可以...

xiaowugui666 2019-08-21 18:35 評論0 收藏0
如何理解并應用貝塞爾曲線

摘要：動畫曲線的應用了解了如何用貝塞爾曲線來指定動畫曲線后，很多動畫涉及到速度方面的效果就可以實現了，例如小車加速剎車，彈簧動畫等速度軌跡都可以根據自己的需要來進行定制。貝塞爾曲線又叫貝茲曲線，在大學高數中一度讓我非常頭疼。前陣子練手寫動畫的時候，發現貝塞爾曲線可以應用于軌跡的繪制以及定義動畫曲線。本文就來探究一下，貝塞爾曲線到底是個什么樣的存在。貝塞爾曲線原理貝塞爾曲線由n個點來決...

余學文 2019-08-23 15:54 評論0 收藏0
css3 動畫（二）貝塞爾曲線

摘要：根據方程的最高階數，可以分為線性貝塞爾曲線二次貝塞爾曲線三次貝塞爾曲線以及更高次的貝塞爾曲線。貝塞爾曲線掃盲在中使用的函數，是一個三次貝塞爾曲線函數。三次貝塞爾曲線中四個點，在中第一個點和最后一個點是固定坐標的和是傳入函數中的參數的。前言上一篇 css3 動畫（一） transition 中，介紹了 transition 的用法。其中 transition 包含四個可設置的屬性： ...

soasme 2019-08-30 15:54 評論0 收藏0
貝塞爾曲線算法之JS獲取點

摘要：什么是貝塞爾曲線貝塞爾曲線，又稱貝茲曲線或貝濟埃曲線，是應用于二維圖形應用程序的數學曲線。這個是三階貝塞爾曲線，同理，綠點有個，點與點之間都是按百分比運動，最終得到一個小黑點。同理，還有四階貝塞爾。我們看看中階貝塞爾曲線上獲取點的效果的地址什么是貝塞爾曲線？貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用于二維圖形應用程序的數學曲線。 showImg(htt...

SQC 2019-08-23 16:12 評論0 收藏0