貝塞爾曲線的數學原理

xiaoxiaozi 發布于2019-08-20 14:00 / 2195人閱讀

摘要：到這里，我們就確定了貝塞爾曲線上的一個點。接下來，請稍微回想一下中學所學的極限知識，讓選取的點在第一條線段上從起點移動到終點，找出所有的貝塞爾曲線上的點。所有的點找出來之后，我們也得到了這條貝塞爾曲線。

貝塞爾曲線的數學原理

我相信所有射雞師們都知道貝塞爾曲線是什么，習慣用PS的會用鋼筆工具，習慣用AI的會用貝塞爾，因為它所繪制出來的曲線很容易受我們控制也很美觀，那么接下來我們來深入了解一下這個貝塞爾曲線的數學原理和公式。

在數學中，貝塞爾又分為很多種，一階貝塞爾曲線、二階貝塞爾曲線、三階貝塞爾曲線····等等等等，除了一階貝塞爾是直線外剩下的多階貝塞爾都是拋物線。而它又由起點、終點和控制點組成，根據控制點的個數和位置決定這個曲線的最終樣式。

原理

我們先在一個平面內任選 3 個不共線的點，依次用線段連接。如圖

在第一條線段上任選一個點 D。計算該點到線段起點的距離 AD，與該線段總長 AB 的比例。

根據上一步得到的比例，從第二條線段上找出對應的點 E，使得 AD:AB = BE:BC。

連接這兩點 DE。

從新的線段 DE 上再次找出相同比例的點 F，使得 DF:DE = AD:AB = BE:BC。

到這里，我們就確定了貝塞爾曲線上的一個點 F。接下來，請稍微回想一下中學所學的極限知識，讓選取的點 D 在第一條線段上從起點 A 移動到終點 B，找出所有的貝塞爾曲線上的點 F。所有的點找出來之后，我們也得到了這條貝塞爾曲線。

想象不出?沒關系，看動畫

那么，我們已經大概了解到貝塞爾繪制出來的過程了，下面看公式

1.一階貝塞爾

一階貝塞爾只有起點和終點，并沒有控制點，所以繪制出來的圖形僅僅只是一條直線，那么在時間t為1秒的情況下的公式如下

$ B(t)=(1-t)P_0+tP_1 ,tin[0,1] $

2.二階貝塞爾

二階貝塞爾只存在一個控制點，此時從起點到終點的線段發生變化，具體的變化是由控制點的位置而改變的，圖中綠色的線段為紅色曲線的切線

$B(t) = (1-t)^2P_0+2t(1-t)P_1+t^2P_2,tin[0,1]$

僅僅只是簡單的一元二次方程式

3.高階貝塞爾

三階

四階

五階

從三階開始貝塞爾就顯得復雜了，高階的通用公式如下
$$ P_i^k=(1-t)P_i^{k-1}+tP_{i+1}^{k-1}$$

$$k=1,2,···,n$$

$$i=0,1,···,n-k$$

可以通過鏈接動態繪制多階貝塞爾曲線DEMO

SVG繪制貝塞爾

為什么選用SVG而不選擇Canvas是因為演示起來簡單，而且SVG對矢量圖形的渲染更好，也就更適合拿來做幾何圖形的描繪，而Canvas適合游戲等比較大的渲染

結果如圖

GPU云服務器云服務器貝塞爾曲線貝塞爾曲線詳解貝塞爾曲線整理實時顯示的曲線

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

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

canvas學習筆記-貝塞爾曲線

摘要：貝塞爾曲線提供了兩個繪制貝塞爾曲線二次貝塞爾曲線，控制點終點三次貝塞爾曲線，控制點一控制點二，終點題外話貝塞爾曲線的數學基礎是早在年就廣為人知的伯恩斯坦多項式。的屬性，取值就可以設置為一個三次貝塞爾曲線方程。 3.4 貝塞爾曲線 canvas提供了兩個繪制貝塞爾曲線api: ctx.quadraticCurveTo(cpx, cpy, x, y); 二次貝塞爾曲線，(cpx, cp...

Sourcelink 2019-08-26 13:29 評論0 收藏0
JavaScript是如何工作的: CSS 和 JS 動畫底層原理及如何優化它們的性能

摘要：貝塞爾曲線貝塞爾曲線是應用于二維圖形應用程序的數學曲線。通過調整控制點，貝塞爾曲線的形狀會發生變化。讓我們看看貝塞爾曲線的工作原理。貝塞爾曲線需要四個值，或者更準確地說它需要兩對數字。每對描述立方貝塞爾曲線控制點的和坐標。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 13 篇。如果你錯過了前面的章節，可以在這里找到它們： JavaScript 是如何工作的：...

darcrand 2019-08-23 14:47 評論0 收藏0
如何理解并應用貝塞爾曲線

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

余學文 2019-08-23 15:54 評論0 收藏0