資訊專欄INFORMATION COLUMN
摘要：到這里，我們就確定了貝塞爾曲線上的一個點。接下來，請稍微回想一下中學(xué)所學(xué)的極限知識，讓選取的點在第一條線段上從起點移動到終點，找出所有的貝塞爾曲線上的點。所有的點找出來之后，我們也得到了這條貝塞爾曲線。
貝塞爾曲線的數(shù)學(xué)原理
我相信所有射雞師們都知道貝塞爾曲線是什么，習(xí)慣用PS的會用鋼筆工具，習(xí)慣用AI的會用貝塞爾，因為它所繪制出來的曲線很容易受我們控制也很美觀，那么接下來我們來深入了解一下這個貝塞爾曲線的數(shù)學(xué)原理和公式。
在數(shù)學(xué)中，貝塞爾又分為很多種，一階貝塞爾曲線、二階貝塞爾曲線、三階貝塞爾曲線····等等等等，除了一階貝塞爾是直線外剩下的多階貝塞爾都是拋物線。而它又由起點、終點和控制點組成，根據(jù)控制點的個數(shù)和位置決定這個曲線的最終樣式。
我們先在一個平面內(nèi)任選 3 個不共線的點，依次用線段連接。如圖
在第一條線段上任選一個點 D。計算該點到線段起點的距離 AD，與該線段總長 AB 的比例。
根據(jù)上一步得到的比例，從第二條線段上找出對應(yīng)的點 E，使得 AD:AB = BE:BC。
連接這兩點 DE。
從新的線段 DE 上再次找出相同比例的點 F，使得 DF:DE = AD:AB = BE:BC。
到這里，我們就確定了貝塞爾曲線上的一個點 F。接下來，請稍微回想一下中學(xué)所學(xué)的極限知識，讓選取的點 D 在第一條線段上從起點 A 移動到終點 B，找出所有的貝塞爾曲線上的點 F。所有的點找出來之后，我們也得到了這條貝塞爾曲線。
想象不出?沒關(guān)系，看動畫
那么，我們已經(jīng)大概了解到貝塞爾繪制出來的過程了，下面看公式
1.一階貝塞爾一階貝塞爾只有起點和終點，并沒有控制點，所以繪制出來的圖形僅僅只是一條直線，那么在時間t為1秒的情況下的公式如下
$ B(t)=(1-t)P_0+tP_1 ,tin[0,1] $
2.二階貝塞爾二階貝塞爾只存在一個控制點，此時從起點到終點的線段發(fā)生變化，具體的變化是由控制點的位置而改變的，圖中綠色的線段為紅色曲線的切線
$B(t) = (1-t)^2P_0+2t(1-t)P_1+t^2P_2,tin[0,1]$
僅僅只是簡單的一元二次方程式
3.高階貝塞爾三階
四階
五階
從三階開始貝塞爾就顯得復(fù)雜了，高階的通用公式如下
$$ P_i^k=(1-t)P_i^{k-1}+tP_{i+1}^{k-1}$$
$$k=1,2,···,n$$
$$i=0,1,···,n-k$$
可以通過鏈接動態(tài)繪制多階貝塞爾曲線DEMO
SVG繪制貝塞爾為什么選用SVG而不選擇Canvas是因為演示起來簡單，而且SVG對矢量圖形的渲染更好，也就更適合拿來做幾何圖形的描繪，而Canvas適合游戲等比較大的渲染
結(jié)果如圖
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81357.html
摘要：貝塞爾曲線提供了兩個繪制貝塞爾曲線二次貝塞爾曲線，控制點終點三次貝塞爾曲線，控制點一控制點二，終點題外話貝塞爾曲線的數(shù)學(xué)基礎(chǔ)是早在年就廣為人知的伯恩斯坦多項式。的屬性，取值就可以設(shè)置為一個三次貝塞爾曲線方程。 3.4 貝塞爾曲線 canvas提供了兩個繪制貝塞爾曲線api: ctx.quadraticCurveTo(cpx, cpy, x, y); 二次貝塞爾曲線，(cpx, cp...
摘要：貝塞爾曲線貝塞爾曲線是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。通過調(diào)整控制點，貝塞爾曲線的形狀會發(fā)生變化。讓我們看看貝塞爾曲線的工作原理。貝塞爾曲線需要四個值，或者更準(zhǔn)確地說它需要兩對數(shù)字。每對描述立方貝塞爾曲線控制點的和坐標(biāo)。 這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 13 篇。 如果你錯過了前面的章節(jié)，可以在這里找到它們： JavaScript 是如何工作的：...
摘要：動畫曲線的應(yīng)用了解了如何用貝塞爾曲線來指定動畫曲線后，很多動畫涉及到速度方面的效果就可以實現(xiàn)了，例如小車加速剎車，彈簧動畫等速度軌跡都可以根據(jù)自己的需要來進行定制。 貝塞爾曲線又叫貝茲曲線，在大學(xué)高數(shù)中一度讓我非常頭疼。前陣子練手寫動畫的時候，發(fā)現(xiàn)貝塞爾曲線可以應(yīng)用于軌跡的繪制以及定義動畫曲線。 本文就來探究一下，貝塞爾曲線到底是個什么樣的存在。 貝塞爾曲線原理 貝塞爾曲線由n個點來決...
閱讀 3294·2021-11-08 13:21
閱讀 1275·2021-08-12 13:28
閱讀 1497·2019-08-30 14:23
閱讀 1995·2019-08-30 11:09
閱讀 905·2019-08-29 13:22
閱讀 2751·2019-08-29 13:12
閱讀 2624·2019-08-26 17:04
閱讀 2391·2019-08-26 13:22
