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