bezierMaker.js——N階貝塞爾曲線生成器

時間 2019-11-08

標籤 beziermaker.js beziermaker 曲線成器欄目 JavaScript 简体版

原文原文鏈接

寫在最前

因爲原生的Canvas最高只支持到三階貝塞爾曲線，那麼我想添加多個控制點怎麼辦呢？（即使大部分複雜曲線均可以用3階貝塞爾來模擬）與此同時，關於貝塞爾控制點的位置咱們很難很是直觀的清楚到底將控制點設置爲多少能夠造成咱們想要的曲線。本着解決以上兩個痛點同時社區內好像並無N階的解決方案（js版）故此次做者很是認真的開源了bezierMaker.js！html

bezierMaker.js理論上支持N階貝塞爾曲線的生成，同時提供了試驗場供開發者能夠自行添加並拖拽控制點最終生成一組繪製動畫。很是直觀的讓開發者知道不一樣位置的控制點所對應的不一樣生成曲線。前端

若是你喜歡這個做品歡迎Star，畢竟star來之不易。。git

項目地址：這裏✨✨✨github

歡迎關注個人博客，不按期更新中——canvas

爲何須要一個試驗場？

在繪製複雜的高階貝塞爾曲線時沒法知道本身須要的曲線的控制點的精確位置。在試驗場中進行模擬，能夠實時獲得控制點的座標值，將獲得的點座標變爲對象數組傳遞進BezierMaker類就能夠生成目標曲線數組

效果圖

功能

[x] 試驗場可添加任意數量控制點
[x] 試驗場支持展現曲線繪製的造成動畫
[x] 控制點可自由拖拽
[x] 支持顯示貝塞爾曲線造成過程的切線
[x] 3階及如下貝塞爾曲線的繪製採用原生API

引入

<script src="./bezierMaker.js"></script>
複製代碼

繪製

上面的效果圖爲試驗場的使用，當你經過試驗場得到控制點的準確座標以後，就能夠調用bezierMaker.js進行曲線的直接繪製。bash

/**
 * canvas canvas的dom對象
 * bezierCtrlNodesArr 控制點數組，包含x，y座標
 * color 曲線顏色
 */
var canvas = document.getElementById('canvas')
//3階以前採用原生方法實現
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()
複製代碼

繪製結果

當控制點少於3個時，會適配使用原生的API接口。當控制點多於2個後，由咱們本身實現的函數進行描點繪製。dom

核心原理

繪製貝塞爾曲線

繪製貝塞爾曲線的核心點在於貝塞爾公式的運用：函數

這個公式中的P0-Pn表明了從起點到各個控制點再到終點的各點與佔比t的各類冪運算。

BezierMaker.prototype.bezier = function(t) { //貝塞爾公式調用
    var x = 0,
        y = 0,
        bezierCtrlNodesArr = this.bezierCtrlNodesArr,
        //控制點數組
        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爲階乘函數
            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
    }
}
複製代碼

對全部點進行遍歷同時根據當前佔比t的值(0<=t<=1)，計算出當前在貝塞爾曲線上的點座標x,y。t的取值做者分紅了1000份，即每次運算t+=0.01。此時算出的x,y即所求的貝塞爾曲線分紅了1000份以後的某一點。當t值從0~1遍歷1000次後生成1000個x,y對應座標，依次描點畫線便可模擬出高階貝塞爾曲線。動畫

對於貝塞爾公式的推導做者會在以後的文章中專門說明，如今你只須要知道咱們經過貝塞爾公式計算出實際貝塞爾曲線被等分紅了1000份的各點，用直線鏈接各點後便可模擬出類曲線。