摘要：什么是貝塞爾曲線貝塞爾曲線，又稱貝茲曲線或貝濟(jì)埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。這個(gè)是三階貝塞爾曲線，同理，綠點(diǎn)有個(gè)，點(diǎn)與點(diǎn)之間都是按百分比運(yùn)動(dòng)，最終得到一個(gè)小黑點(diǎn)。同理，還有四階貝塞爾。我們看看中階貝塞爾曲線上獲取點(diǎn)的效果的地址

貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟(jì)埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。

這個(gè)一階貝塞爾曲線繪制過程，黑點(diǎn)按百分比t從P0->P1移動(dòng)，看不出什么呢~ 那繼續(xù)看后面的圖

這個(gè)是二階貝塞爾曲線，從P0->P1有個(gè)小綠點(diǎn)按百分比t運(yùn)動(dòng)，從P1->P2也有個(gè)小綠點(diǎn)按百分比t運(yùn)動(dòng)，兩個(gè)綠點(diǎn)之間也有個(gè)小黑點(diǎn)按百分比t運(yùn)動(dòng)，這個(gè)黑點(diǎn)產(chǎn)生的軌跡就是一個(gè)二階貝塞爾曲線。

這個(gè)是三階貝塞爾曲線，同理，綠點(diǎn)有3個(gè)，點(diǎn)與點(diǎn)之間都是按百分比t運(yùn)動(dòng)，最終得到一個(gè)小黑點(diǎn)。這個(gè)小黑點(diǎn)的運(yùn)動(dòng)軌跡就是三階貝塞爾。

同理，還有四階貝塞爾。

同理，六階貝塞爾，N階貝塞爾。

實(shí)際上，我們的運(yùn)用中，3階貝塞爾就已經(jīng)足夠滿足我們的業(yè)務(wù)需求了，生活中，多個(gè)三階貝塞爾曲線可以組合成任意一條曲線，我們的photoshop里面的鋼筆工具就是3階貝塞爾曲線實(shí)現(xiàn)的。

數(shù)學(xué)家已經(jīng)給了我們公式：

不好意思，高數(shù)還給了老師，這尼瑪公式看不懂啊~ 沒關(guān)系，我們簡化下就能看懂了。

// t是百分比，a是參數(shù)

// 1階貝塞爾曲線公式
function onebsr(t, a1, a2) {
    return a1 + (a2 - a1) * t;
}

// 2階貝塞爾曲線公式
function twobsr(t, a1, a2, a3) {
    return ((1 - t) * (1 - t)) * a1 + 2 * t * (1 - t) * a2 + t * t * a3;
}

// 3階貝塞爾曲線公式
function threebsr(t, a1, a2, a3, a4) {
    return a1 * (1 - t) * (1 - t) * (1 - t) + 3 * a2 * t * (1 - t) * (1 - t) + 3 * a3 * t * t * (1 - t) + a4 * t * t * t;
}

根據(jù)公式，我們可以帶入坐標(biāo)進(jìn)行計(jì)算

/**
     * @desc 一階貝塞爾
     * @param {number} t 當(dāng)前百分比
     * @param {Array} p1 起點(diǎn)坐標(biāo)
     * @param {Array} p2 終點(diǎn)坐標(biāo)
     */
    oneBezier(t, p1, p2) {
        const [x1, y1] = p1;
        const [x2, y2] = p2;
        let x = x1 + (x2 - x1) * t;
        let y = y1 + (y2 - y1) * t;
        return [x, y];
    }

    /**
     * @desc 二階貝塞爾
     * @param {number} t 當(dāng)前百分比
     * @param {Array} p1 起點(diǎn)坐標(biāo)
     * @param {Array} p2 終點(diǎn)坐標(biāo)
     * @param {Array} cp 控制點(diǎn)
     */
    twoBezier(t, p1, cp, p2) {
        const [x1, y1] = p1;
        const [cx, cy] = cp;
        const [x2, y2] = p2;
        let x = (1 - t) * (1 - t) * x1 + 2 * t * (1 - t) * cx + t * t * x2;
        let y = (1 - t) * (1 - t) * y1 + 2 * t * (1 - t) * cy + t * t * y2;
        return [x, y];
    }

    /**
     * @desc 三階貝塞爾
     * @param {number} t 當(dāng)前百分比
     * @param {Array} p1 起點(diǎn)坐標(biāo)
     * @param {Array} p2 終點(diǎn)坐標(biāo)
     * @param {Array} cp1 控制點(diǎn)1
     * @param {Array} cp2 控制點(diǎn)2
     */
    threeBezier(t, p1, cp1, cp2, p2) {
        const [x1, y1] = p1;
        const [x2, y2] = p2;
        const [cx1, cy1] = cp1;
        const [cx2, cy2] = cp2;
        let x =
            x1 * (1 - t) * (1 - t) * (1 - t) +
            3 * cx1 * t * (1 - t) * (1 - t) +
            3 * cx2 * t * t * (1 - t) +
            x2 * t * t * t;
        let y =
            y1 * (1 - t) * (1 - t) * (1 - t) +
            3 * cy1 * t * (1 - t) * (1 - t) +
            3 * cy2 * t * t * (1 - t) +
            y2 * t * t * t;
        return [x, y];
    }

我把貝塞爾曲線封裝了下，添加了一個(gè)獲取路徑點(diǎn)的方法，然后使用span標(biāo)簽繪制到頁面上的效果。

我們看看DEMO中1~3階貝塞爾曲線上獲取點(diǎn)的效果