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