前段时间闲暇的时候看到一个贝塞尔曲线算法的文章，试着在小程序里去实现小程序的贝塞尔曲线算法，及其效果。

主要应用到的技术点：

1、小程序wxss布局，以及数据绑定

2、js二次bezier曲线算法

核心算法，写在app.js里

bezier: function (points, times) {// 0、以3个控制点为例，点A,B,C,AB上设置点D,BC上设置点E,DE连线上设置点F,则最终的贝塞尔曲线是点F的坐标轨迹。// 1、计算相邻控制点间距。// 2、根据完成时间,计算每次执行时D在AB方向上移动的距离，E在BC方向上移动的距离。// 3、时间每递增100ms，则D,E在指定方向上发生位移, F在DE上的位移则可通过AD/AB = DF/DE得出。// 4、根据DE的正余弦值和DE的值计算出F的坐标。// 邻控制AB点间距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点间距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;// 点AB的正切const TAN_AB = (points[1]['y'] - points[0]['y']) / (points[1]['x'] - points[0]['x']);// 点BC的正切const TAN_BC = (points[2]['y'] - points[1]['y']) / (points[2]['x'] - points[1]['x']);// 点AB的弧度值const RADIUS_AB = Math.atan(TAN_AB);// 点BC的弧度值const RADIUS_BC = Math.atan(TAN_BC);// 每次执行for (var i = 1; i <= times; i++) {// AD的距离var dist_AD = EACH_MOVE_AD * i;// BE的距离var dist_BE = EACH_MOVE_BE * i;// D点的坐标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点的坐标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点的坐标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};}

注释很详细，算法的原理其实也很简单。 源码也发出来吧，github地址:github.com/xiongchenf/…

调用方法和用法就不占篇幅了，都是基础的东西。效果图如下：

作者：熊晨沣
原文地址：本文发布于小程序社区（wxapp-union.com）转载请注明出处，谢谢！