国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

貝塞爾曲線算法之JS獲取點

SQC / 2791人閱讀

摘要:什么是貝塞爾曲線貝塞爾曲線,又稱貝茲曲線或貝濟埃曲線,是應用于二維圖形應用程序的數學曲線。這個是三階貝塞爾曲線,同理,綠點有個,點與點之間都是按百分比運動,最終得到一個小黑點。同理,還有四階貝塞爾。我們看看中階貝塞爾曲線上獲取點的效果的地址

什么是貝塞爾曲線?

貝塞爾曲線(Bézier curve),又稱貝茲曲線或貝濟埃曲線,是應用于二維圖形應用程序的數學曲線。


這個一階貝塞爾曲線繪制過程,黑點按百分比t從P0->P1移動,看不出什么呢~ 那繼續看后面的圖


這個是二階貝塞爾曲線,從P0->P1有個小綠點按百分比t運動,從P1->P2也有個小綠點按百分比t運動,兩個綠點之間也有個小黑點按百分比t運動,這個黑點產生的軌跡就是一個二階貝塞爾曲線。


這個是三階貝塞爾曲線,同理,綠點有3個,點與點之間都是按百分比t運動,最終得到一個小黑點。這個小黑點的運動軌跡就是三階貝塞爾。


同理,還有四階貝塞爾。


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

實際上,我們的運用中,3階貝塞爾就已經足夠滿足我們的業務需求了,生活中,多個三階貝塞爾曲線可以組合成任意一條曲線,我們的photoshop里面的鋼筆工具就是3階貝塞爾曲線實現的。
貝塞爾曲線方程解析

數學家已經給了我們公式:

不好意思,高數還給了老師,這尼瑪公式看不懂啊~ 沒關系,我們簡化下就能看懂了。

// t是百分比,a是參數

// 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;
}

根據公式,我們可以帶入坐標進行計算

/**
     * @desc 一階貝塞爾
     * @param {number} t 當前百分比
     * @param {Array} p1 起點坐標
     * @param {Array} p2 終點坐標
     */
    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 當前百分比
     * @param {Array} p1 起點坐標
     * @param {Array} p2 終點坐標
     * @param {Array} cp 控制點
     */
    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 當前百分比
     * @param {Array} p1 起點坐標
     * @param {Array} p2 終點坐標
     * @param {Array} cp1 控制點1
     * @param {Array} cp2 控制點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];
    }
算法封裝

我把貝塞爾曲線封裝了下,添加了一個獲取路徑點的方法,然后使用span標簽繪制到頁面上的效果。

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


demo的github地址:https://github.com/mtsee/Bezier

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102794.html

相關文章

  • [源碼閱讀]基于Canvas+塞爾曲線算法的平滑手寫板

    摘要:對于能畫出貝塞爾曲線的,對已經求出的實例,執行,否則執行畫點的方法獲取配置中的,執行畫點。總結閱讀一遍后,這個庫說白就是基礎的事件操作貝塞爾曲線算法,但是,它內部的代碼格式非常清晰,細粒度代碼復用使得維護起來非常方便。 signature_pad一個基于Canvas的平滑手寫畫板工具 介紹 實現手寫有多種方式。 一種比較容易做出的是對鼠標移動軌跡畫點,再將兩點之間以直線相連,最后再...

    Darkgel 評論0 收藏0
  • canvas進階——如何畫出平滑的曲線?

    摘要:,算法就是這樣,那我們基于該算法再對現有代碼進行一次升級改造設置線條顏色在原有的基礎上,我們創建了一個變量用于保存之前事件中鼠標經過的點,根據該算法可知要繪制二次貝塞爾曲線起碼需要個點以上,因此我們只有在中的點數大于時才開始繪制。 背景概要 相信大家平時在學習canvas 或 項目開發中使用canvas的時候應該都遇到過這樣的需求:實現一個可以書寫的畫板小工具。 嗯,相信這對canva...

    Cobub 評論0 收藏0
  • canvas進階——如何畫出平滑的曲線?

    摘要:,算法就是這樣,那我們基于該算法再對現有代碼進行一次升級改造設置線條顏色在原有的基礎上,我們創建了一個變量用于保存之前事件中鼠標經過的點,根據該算法可知要繪制二次貝塞爾曲線起碼需要個點以上,因此我們只有在中的點數大于時才開始繪制。 背景概要 相信大家平時在學習canvas 或 項目開發中使用canvas的時候應該都遇到過這樣的需求:實現一個可以書寫的畫板小工具。 嗯,相信這對canva...

    _ivan 評論0 收藏0

發表評論

0條評論

SQC

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<