npm install bezier-js

constructor(input = {points: [20, 30, 40], ts: [0, 60000 * 60 * 24]}) {
    this.line = null
    this.keyPoints = []//根據(jù)輸入input，生成關(guān)鍵的點(diǎn)坐標(biāo)數(shù)組    [   x1坐標(biāo),y1坐標(biāo)，  x2坐標(biāo),y2坐標(biāo)     ]
    this.tsStart = 0
    this.tsEnd = 0
    this.init(input)
    this.input = input
}
init(input) {
    try {
        if (![input].$has('ts')) input.ts = [0, 60000 * 60 * 24]//如果沒有ts時(shí)間，默認(rèn)賦值為1天的時(shí)間周期
        if (![input].$has('points', 'ts') || input.points.length < 2 || input.ts.length !== 2) {
            console.log('【bezier】錯(cuò)誤！實(shí)例化曲線時(shí)參數(shù)錯(cuò)誤')
            return//最小2個(gè)點(diǎn)
        }
        this.tsStart = Number(input.ts[0])
        this.tsEnd = Number(input.ts[1])
        let tsLen = this.tsEnd - this.tsStart
        if (tsLen < 0) {
            console.log('【bezier】錯(cuò)誤！實(shí)例化曲線時(shí)參數(shù)錯(cuò)誤,時(shí)間長度錯(cuò)誤')
            return
        }
        let stepLen = tsLen / (input.points.length - 1)
        let points = []
        let x = input.ts[0]
        input.points.forEach(y => {
            points.push({x: x})
            points.push({y: y})
            x += stepLen
        })
        points.splice(points.length - 2, 2)//刪除最后一組坐標(biāo)（2個(gè)元素）
        points.push({x: input.ts[1]})//再用input的值填充，避免因?yàn)槠骄祵?dǎo)致精度的問題
        points.push({y: input.points[input.points.length - 1]})
        this.keyPoints = points
        this.line = new Bezier(points)  // points =  [   x1坐標(biāo),y1坐標(biāo)，  x2坐標(biāo),y2坐標(biāo)     ]
        console.log('生成貝塞爾曲線的數(shù)據(jù)', this.line, points)
    } catch (e) {
        console.log('【bezier】錯(cuò)誤！在實(shí)例化對(duì)象時(shí)錯(cuò)誤', e)
    }
}

// 獲取指定時(shí)間戳的y值數(shù)據(jù)
// ts橫坐標(biāo)，時(shí)間戳
// 輸出 {x,y} ，x就是 ts
get(ts = 0) {
    let duration
    if (ts <= this.tsStart) {
        duration = 0
    } else if (ts <= this.tsEnd) {
        duration = ts - this.tsStart
    } else {
        duration = this.tsEnd - this.tsStart
    }
    let b = duration / (this.tsEnd - this.tsStart)
    return this.line.get(b) // b取值0~1，小數(shù).0表示曲線第一個(gè)點(diǎn)，1表示最后1個(gè)點(diǎn)
}

/**
 * 查詢曲線上某個(gè)時(shí)間點(diǎn)曲線上具體的值，這里查詢的是上限。
 */
getPointValueByTime() {
    // 把時(shí)間轉(zhuǎn)換成毫秒
    let time = this.timeToSec(this.defaultTime)
    // 判斷這個(gè)時(shí)間在哪兩個(gè)關(guān)鍵點(diǎn)之間
    // 先獲取曲線上所有時(shí)間點(diǎn)的數(shù)組
    let preData = []
    for (var i = 0; i < upperLimit.length; i++) {
        let itemTime = this.timeToSec(upperLimit[i][0])
        // 如果查詢的時(shí)間小于當(dāng)前的item，這表示在這個(gè)item和上一個(gè)item之間。則通過這兩個(gè)item生成貝塞爾對(duì)象，然后用get方法查詢time值
        if (time <= itemTime && i != 0) {
            // 查詢的點(diǎn)就是preData 和item的數(shù)組
            let pointArray = []
            pointArray.push(preData[1])
            pointArray.push(upperLimit[i][1])
            const bezier = new BezierLine({points: pointArray, ts: [preData[0], itemTime]})
            let data = bezier.get(time)
            console.log('查詢到當(dāng)前時(shí)間' + time + '的值為', data)
            this.searchValueByTime = parseFloat(data.y).toFixed(2)
            break
        } else {
            // 上一個(gè)不符合的對(duì)象
            preData = [itemTime, upperLimit[i][1]]
        }
    }
},