首頁 > web前端 > js教程 > 簡單理解貝塞爾曲線。

簡單理解貝塞爾曲線。

王林
發布: 2024-08-16 11:04:02
原創
605 人瀏覽過

想像一下,如果只能用直線、橢圓、圓,設計一輛線條流暢、外觀複雜的汽車不是很困難嗎?

1962年,法國工程師Pierre Bézier發表了貝塞爾曲線,最初用於汽車主體設計。

Simply understanding Bézier curves.

貝塞爾曲線可以透過一系列控制點定義一條平滑的曲線。曲線總是經過第一個和最後一個控制點,並受中間控制點形狀的影響。此外,貝塞爾曲線具有凸包的性質。

貝塞爾曲線廣泛應用於電腦圖形和圖像建模,例如動畫、字體設計和工業設計。

公式

Simply understanding Bézier curves.

讓我們來了解一下。

P(t) 表示曲線上 t 處的點(t 是分數,值從 0 到 1)。 t 處曲線上的點是什麼?常見的曲線描述是:y = f(x),現在讓我們將 P(t) 理解為 f(x)。不同的是,P(t)是參數表示(計算結果是[x,y]這樣的「向量」),後面會詳細解釋。

接下來,Pi代表第i個控制點(i從0開始)。以上圖為例,有4個控制點,分別是P0、P1、P2、P3。公式中的n是控制點的最後一個索引,即n = 3(注意不是控制點的數量,而是計數減1)。

Bi,n(t) 是 Bernstein 基底函數,也稱為基底函數。對於每個特定的(i,n),都有一個不同的基底函數與之對應。如果從加權的角度來理解,可以將基底函數視為權重函數,表示第i個控制點Pi對t位置的曲線座標的「貢獻」。

基底函數的公式如下:

Simply understanding Bézier curves.

(nini二項式{n}{i} (

in ) 是組合數(從n中選擇i有多少種方法?)。至於為什麼基底函數是這樣的,可以結合De Casteljau演算法來理解(見文中後面)

回到P(t)公式, Σi= 🎜>nsum_{i=0}^{n} ΣΣΣΣΣΣΣΣΣ i=0nn 為求和符號,表示後續部分( Bi,i,(t)PPB_{i,n}(t) cdot P_iB

B

Simply understanding Bézier curves.

Simply understanding Bézier curves.

Simply understanding Bézier curves.

Simply understanding Bézier curves.

i,nSimply understanding Bézier curves.

Simply understanding Bézier curves.

Simply understanding Bézier curves.

() ⋅

P

iiiiiiii ) 將從 i=0 到 i=n 求和。 以上圖為例,假設我們要計算P(0.1),該怎麼做呢?展開如下: 代入 t=0.1 得到: 曲線的參數表示 這裡直接引用了網友的文章(連結) 讓我們專注於上面的公式。 如上圖所示,我們熟悉的直線可以從另一個角度來理解:用t(即|AP|從點P到已知點(x0,y0)的長度),那麼透過上面的三角函數就可以確定P點。 更一般地,可以寫成: 這裡,P0 是向量 [x0,y0],v 也是向量。加在一起後,P(t) 就是向量 [x,y]。 再看一下圓圈: 如圖所示,圓可以看作有一個已知的圓心,圓上的任一點都由旋轉角度和半徑決定。也可以寫成: 參數方程式保持幾何不變性,並且可以表示圓形等形狀(其中一個 x 對應多個 y 值)。 德卡斯特里奧 De Casteljau 演算法是一種在實際應用中用於評估和近似 Bézier 曲線以進行繪圖和其他操作的方法。相較於先前基於定義的評估方法,速度更快、更穩定,更接近貝塞爾曲線的特性。 這裡,我們參考了兩篇文章:link1 和 link2

先定義以下內容:

Simply understanding Bézier curves.

看上面的β。上標和下標有點混亂;你可以用下面的三角遞歸來理解:

Simply understanding Bézier curves.

上圖三角形的紅邊是除以t0的兩條線段的控制點。為了更形象化地理解t0,P(t0)(即 β0(0(0((()beta_0^{(n)} βββ

β

Simply understanding Bézier curves.

β

    β
  1. β
0

(n) ),兩條曲線的控制點,可以參考下圖:

上圖展示了當t=0.5時各點之間的關係。

從「插值」的角度來看,計算過程也可以理解為:

求每對相鄰控制點的中點(因為t=0.5),即b01,b11,b21(請原諒我的記法,用LaTeX寫太麻煩了)

在 b01−b11 上求中點 b02,在 b11-b21 上求中點 b12

求 b02−b12 上的中點 b03 號 其實De Casteljau演算法的本質就是插值和迭代。

基於 De Casteljau 的曲線繪製 目前觀察到兩種方法。 一種方法涉及以小步增量將 t 從 0 遍歷到 1(即0.01)。每次求 P(t) 時,都會使用遞歸公式來決定 β0(0(0((()beta_0^{(n)} βββββββ0(n) . 另一種方法是求P(t=0.5),然後對於兩條分割曲線,分別求P(t=0.5)...這樣的細分一直持續到曲線逼近為止。 執行 光看而不練習總覺得不真實。 所以我自己寫了曲線繪製的實作程式碼,整理成工具包:Compilelife的Toolkit 對應的核心程式碼在這裡

以上是簡單理解貝塞爾曲線。的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板