資訊專欄INFORMATION COLUMN
摘要：什么是貝塞爾曲線貝塞爾曲線，又稱貝茲曲線或貝濟埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。這個是三階貝塞爾曲線，同理，綠點有個，點與點之間都是按百分比運動，最終得到一個小黑點。同理，還有四階貝塞爾。我們看看中階貝塞爾曲線上獲取點的效果的地址
什么是貝塞爾曲線？
貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。
這個一階貝塞爾曲線繪制過程，黑點按百分比t從P0->P1移動，看不出什么呢~ 那繼續(xù)看后面的圖
這個是二階貝塞爾曲線，從P0->P1有個小綠點按百分比t運動，從P1->P2也有個小綠點按百分比t運動，兩個綠點之間也有個小黑點按百分比t運動，這個黑點產(chǎn)生的軌跡就是一個二階貝塞爾曲線。
這個是三階貝塞爾曲線，同理，綠點有3個，點與點之間都是按百分比t運動，最終得到一個小黑點。這個小黑點的運動軌跡就是三階貝塞爾。
同理，還有四階貝塞爾。
同理，六階貝塞爾，N階貝塞爾。
實際上，我們的運用中，3階貝塞爾就已經(jīng)足夠滿足我們的業(yè)務(wù)需求了，生活中，多個三階貝塞爾曲線可以組合成任意一條曲線，我們的photoshop里面的鋼筆工具就是3階貝塞爾曲線實現(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ù)公式，我們可以帶入坐標進行計算
/**
* @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階貝塞爾曲線上獲取點的效果
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102794.html
摘要：對于能畫出貝塞爾曲線的，對已經(jīng)求出的實例，執(zhí)行，否則執(zhí)行畫點的方法獲取配置中的，執(zhí)行畫點?？偨Y(jié)閱讀一遍后，這個庫說白就是基礎(chǔ)的事件操作貝塞爾曲線算法，但是，它內(nèi)部的代碼格式非常清晰，細粒度代碼復(fù)用使得維護起來非常方便。 signature_pad一個基于Canvas的平滑手寫畫板工具 介紹 實現(xiàn)手寫有多種方式。 一種比較容易做出的是對鼠標移動軌跡畫點，再將兩點之間以直線相連，最后再...
摘要：，算法就是這樣，那我們基于該算法再對現(xiàn)有代碼進行一次升級改造設(shè)置線條顏色在原有的基礎(chǔ)上，我們創(chuàng)建了一個變量用于保存之前事件中鼠標經(jīng)過的點，根據(jù)該算法可知要繪制二次貝塞爾曲線起碼需要個點以上，因此我們只有在中的點數(shù)大于時才開始繪制。 背景概要 相信大家平時在學(xué)習canvas 或 項目開發(fā)中使用canvas的時候應(yīng)該都遇到過這樣的需求：實現(xiàn)一個可以書寫的畫板小工具。 嗯，相信這對canva...
摘要：，算法就是這樣，那我們基于該算法再對現(xiàn)有代碼進行一次升級改造設(shè)置線條顏色在原有的基礎(chǔ)上，我們創(chuàng)建了一個變量用于保存之前事件中鼠標經(jīng)過的點，根據(jù)該算法可知要繪制二次貝塞爾曲線起碼需要個點以上，因此我們只有在中的點數(shù)大于時才開始繪制。 背景概要 相信大家平時在學(xué)習canvas 或 項目開發(fā)中使用canvas的時候應(yīng)該都遇到過這樣的需求：實現(xiàn)一個可以書寫的畫板小工具。 嗯，相信這對canva...
閱讀 2069·2021-11-23 09:51
閱讀 2213·2021-09-29 09:34
閱讀 3704·2021-09-22 15:50
閱讀 3564·2021-09-22 15:23
閱讀 2590·2019-08-30 15:55
閱讀 708·2019-08-30 15:53
閱讀 3079·2019-08-29 17:09
閱讀 2635·2019-08-29 13:57
