前段時間閑暇的時候看到一個貝塞爾曲線算法的文章，試著在小程序里去實(shí)現(xiàn)小程序的貝塞爾曲線算法烛恤，及其效果母怜。
主要應(yīng)用到的技術(shù)點(diǎn)：
1、小程序wxss布局棒动，以及數(shù)據(jù)綁定
2糙申、js二次bezier曲線算法
核心算法，寫在app.js里
bezier: function (points, times) {
// 0、以3個控制點(diǎn)為例柜裸，點(diǎn)A,B,C,AB上設(shè)置點(diǎn)D,BC上設(shè)置點(diǎn)E,DE連線上設(shè)置點(diǎn)F,則最終的貝塞爾曲線是點(diǎn)F的坐標(biāo)軌跡缕陕。
// 1、計(jì)算相鄰控制點(diǎn)間距疙挺。
// 2扛邑、根據(jù)完成時間,計(jì)算每次執(zhí)行時D在AB方向上移動的距離，E在BC方向上移動的距離铐然。
// 3蔬崩、時間每遞增100ms，則D,E在指定方向上發(fā)生位移, F在DE上的位移則可通過AD/AB = DF/DE得出搀暑。
// 4沥阳、根據(jù)DE的正余弦值和DE的值計(jì)算出F的坐標(biāo)。
// 鄰控制AB點(diǎn)間距
var bezier_points = [];
var points_D = [];
var points_E = [];
const DIST_AB = Math.sqrt(Math.pow(points[1]['x'] - points[0]['x'], 2) + Math.pow(points[1]['y'] - points[0]['y'], 2));
// 鄰控制BC點(diǎn)間距
const DIST_BC = Math.sqrt(Math.pow(points[2]['x'] - points[1]['x'], 2) + Math.pow(points[2]['y'] - points[1]['y'], 2));
// D每次在AB方向上移動的距離
const EACH_MOVE_AD = DIST_AB / times;
// E每次在BC方向上移動的距離
const EACH_MOVE_BE = DIST_BC / times;
// 點(diǎn)AB的正切
const TAN_AB = (points[1]['y'] - points[0]['y']) / (points[1]['x'] - points[0]['x']);
// 點(diǎn)BC的正切
const TAN_BC = (points[2]['y'] - points[1]['y']) / (points[2]['x'] - points[1]['x']);
// 點(diǎn)AB的弧度值
const RADIUS_AB = Math.atan(TAN_AB);
// 點(diǎn)BC的弧度值
const RADIUS_BC = Math.atan(TAN_BC);
// 每次執(zhí)行
for (var i = 1; i <= times; i++) {
// AD的距離
var dist_AD = EACH_MOVE_AD * i;
// BE的距離
var dist_BE = EACH_MOVE_BE * i;
// D點(diǎn)的坐標(biāo)
var point_D = {};
point_D['x'] = dist_AD * Math.cos(RADIUS_AB) + points[0]['x'];
point_D['y'] = dist_AD * Math.sin(RADIUS_AB) + points[0]['y'];
points_D.push(point_D);
// E點(diǎn)的坐標(biāo)
var point_E = {};
point_E['x'] = dist_BE * Math.cos(RADIUS_BC) + points[1]['x'];
point_E['y'] = dist_BE * Math.sin(RADIUS_BC) + points[1]['y'];
points_E.push(point_E);
// 此時線段DE的正切值
var tan_DE = (point_E['y'] - point_D['y']) / (point_E['x'] - point_D['x']);
// tan_DE的弧度值
var radius_DE = Math.atan(tan_DE);
// 地市DE的間距
var dist_DE = Math.sqrt(Math.pow((point_E['x'] - point_D['x']), 2) + Math.pow((point_E['y'] - point_D['y']), 2));
// 此時DF的距離
var dist_DF = (dist_AD / DIST_AB) * dist_DE;
// 此時DF點(diǎn)的坐標(biāo)
var point_F = {};
point_F['x'] = dist_DF * Math.cos(radius_DE) + point_D['x'];
point_F['y'] = dist_DF * Math.sin(radius_DE) + point_D['y'];
bezier_points.push(point_F);
}
return {
'bezier_points': bezier_points
};
}
注釋很詳細(xì)自点，算法的原理其實(shí)也很簡單桐罕。 源碼也發(fā)出來吧，github地址: https://github.com/xiongchenf/flybus.git
調(diào)用方法和用法就不占篇幅了桂敛，都是基礎(chǔ)的東西功炮。效果圖如下：
094614lq8csndfksittquq.gif
作者：熊晨灃
原文地址：本文發(fā)布于小程序社區(qū)（wxapp-union.com）轉(zhuǎn)載請注明出處，謝謝术唬！
