寫(xiě)在最前
由于原生的Canvas最高只支持到三階貝塞爾曲線(xiàn)，那么我想添加多個(gè)控制點(diǎn)怎么辦呢？（即便大部分復(fù)雜曲線(xiàn)都可以用3階貝塞爾來(lái)模擬）與此同時(shí)，關(guān)于貝塞爾控制點(diǎn)的位置我們很難非常直觀的清楚到底將控制點(diǎn)設(shè)置為多少可以形成我們想要的曲線(xiàn)。本著解決以上兩個(gè)痛點(diǎn)同時(shí)社區(qū)內(nèi)好像并沒(méi)有N階的解決方案（js版）故這次作者非常認(rèn)真的開(kāi)源了bezierMaker.js！
bezierMaker.js理論上支持N階貝塞爾曲線(xiàn)的生成，同時(shí)提供了試驗(yàn)場(chǎng)供開(kāi)發(fā)者可以自行添加并拖拽控制點(diǎn)最終生成一組繪制動(dòng)畫(huà)。非常直觀的讓開(kāi)發(fā)者知道不同位置的控制點(diǎn)所對(duì)應(yīng)的不同生成曲線(xiàn)。
如果你喜歡這個(gè)作品歡迎Star，畢竟star來(lái)之不易。。
項(xiàng)目地址：這里✨✨✨
為什么需要一個(gè)試驗(yàn)場(chǎng)？
在繪制復(fù)雜的高階貝塞爾曲線(xiàn)時(shí)無(wú)法知道自己需要的曲線(xiàn)的控制點(diǎn)的精確位置。在試驗(yàn)場(chǎng)中進(jìn)行模擬，可以實(shí)時(shí)得到控制點(diǎn)的坐標(biāo)值，將得到的點(diǎn)坐標(biāo)變?yōu)閷?duì)象數(shù)組傳遞進(jìn)BezierMaker類(lèi)就可以生成目標(biāo)曲線(xiàn)
效果圖
功能
- [x] 試驗(yàn)場(chǎng)可添加任意數(shù)量控制點(diǎn)
- [x] 試驗(yàn)場(chǎng)支持展示曲線(xiàn)繪制的形成動(dòng)畫(huà)
- [x] 控制點(diǎn)可自由拖拽
- [x] 支持顯示貝塞爾曲線(xiàn)形成過(guò)程的切線(xiàn)
- [x] 3階及以下貝塞爾曲線(xiàn)的繪制采用原生API
引入
<script src="./bezierMaker.js"></script>
繪制
上面的效果圖為試驗(yàn)場(chǎng)的使用，當(dāng)你通過(guò)試驗(yàn)場(chǎng)獲得控制點(diǎn)的準(zhǔn)確坐標(biāo)之后，就可以調(diào)用bezierMaker.js進(jìn)行曲線(xiàn)的直接繪制。
/**
* canvas canvas的dom對(duì)象
* bezierCtrlNodesArr 控制點(diǎn)數(shù)組，包含x，y坐標(biāo)
* color 曲線(xiàn)顏色
*/
var canvas = document.getElementById('canvas')
//3階之前采用原生方法實(shí)現(xiàn)
var arr0 = [{x:70,y:25},{x:24,y:51}]
var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]
var arr2 = [{x:23,y:225},{x:70,y:79},{x:40,y:51},{x:300, y:44}]
var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239}]
var arr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551},{x:170,y:279}]
var bezier0 = new BezierMaker(canvas, arr0, 'black')
var bezier1 = new BezierMaker(canvas, arr1, 'red')
var bezier2 = new BezierMaker(canvas, arr2, 'blue')
var bezier3 = new BezierMaker(canvas, arr3, 'yellow')
var bezier4 = new BezierMaker(canvas, arr4, 'green')
bezier0.drawBezier()
bezier1.drawBezier()
bezier2.drawBezier()
bezier3.drawBezier()
bezier4.drawBezier()
繪制結(jié)果
當(dāng)控制點(diǎn)少于3個(gè)時(shí)，會(huì)適配使用原生的API接口。當(dāng)控制點(diǎn)多于2個(gè)后，由我們自己實(shí)現(xiàn)的函數(shù)進(jìn)行描點(diǎn)繪制。
核心原理
繪制貝塞爾曲線(xiàn)
繪制貝塞爾曲線(xiàn)的核心點(diǎn)在于貝塞爾公式的運(yùn)用：
這個(gè)公式中的P0-Pn代表了從起點(diǎn)到各個(gè)控制點(diǎn)再到終點(diǎn)的各點(diǎn)與占比t的各種冪運(yùn)算。
BezierMaker.prototype.bezier = function(t) { //貝塞爾公式調(diào)用
var x = 0,
y = 0,
bezierCtrlNodesArr = this.bezierCtrlNodesArr,
//控制點(diǎn)數(shù)組
n = bezierCtrlNodesArr.length - 1,
self = this
bezierCtrlNodesArr.forEach(function(item, index) {
if(!index) {
x += item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index)
y += item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index)
} else {
//factorial為階乘函數(shù)
x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index)
y += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index)
}
})
return {
x: x,
y: y
}
}
對(duì)所有點(diǎn)進(jìn)行遍歷同時(shí)根據(jù)當(dāng)前占比t的值(0<=t<=1)，計(jì)算出當(dāng)前在貝塞爾曲線(xiàn)上的點(diǎn)坐標(biāo)x,y。t的取值作者分成了1000份，即每次運(yùn)算t+=0.01。此時(shí)算出的x,y即所求的貝塞爾曲線(xiàn)分成了1000份之后的某一點(diǎn)。當(dāng)t值從0~1遍歷1000次后生成1000個(gè)x,y對(duì)應(yīng)坐標(biāo)，依次描點(diǎn)畫(huà)線(xiàn)即可模擬出高階貝塞爾曲線(xiàn)。
對(duì)于貝塞爾公式的推導(dǎo)作者會(huì)在之后的文章中專(zhuān)門(mén)說(shuō)明，現(xiàn)在你只需要知道我們通過(guò)貝塞爾公式計(jì)算出實(shí)際貝塞爾曲線(xiàn)被等分成了1000份的各點(diǎn)，用直線(xiàn)連接各點(diǎn)后即可模擬出類(lèi)曲線(xiàn)。
對(duì)于模擬場(chǎng)貝塞爾曲線(xiàn)生成動(dòng)畫(huà)的實(shí)現(xiàn)
這個(gè)部分相關(guān)代碼可以參考這里
整體思路是用遞歸的方式來(lái)將每個(gè)一層控制點(diǎn)當(dāng)做1階貝塞爾函數(shù)來(lái)計(jì)算下一層控制點(diǎn)并對(duì)應(yīng)連線(xiàn)。具體邏輯作者會(huì)留到深入講解貝塞爾曲線(xiàn)公式原理的時(shí)候一起梳理一下試驗(yàn)場(chǎng)的動(dòng)畫(huà)生成原理~
小結(jié)
作者一直想開(kāi)源一些東西（但是菜，也沒(méi)啥能寫(xiě)的），然而平時(shí)會(huì)用到的都被人寫(xiě)了，再造輪子也沒(méi)別人寫(xiě)得好。這次也算是發(fā)現(xiàn)了一個(gè)貌似空白一些的區(qū)域。所以非常鄭重的決定開(kāi)源。貝塞爾的高級(jí)運(yùn)用在gayhub中大多是安卓的實(shí)現(xiàn)，前端領(lǐng)域中還有很多地方可以更多的展開(kāi)，歡迎討論~ 多多批評(píng)！
最后
項(xiàng)目地址：這里✨✨
試驗(yàn)場(chǎng)地址：一定進(jìn)來(lái)玩✨✨✨
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
