Some time ago leisure time to see a Bessel curve algorithm of the article, trying to achieve small procedures in the Bessel curve algorithm, and its effect.

Main technical points applied:

1, small program WXSS layout, and data binding


The core algorithm, written in app.js

bezier: function (points, times) {/ / 0, three control points, for example, point A, B, C, AB on the set point D, BC on the set point E, DE attachment on the set point, F is the ultimate bezier points F the coordinates of the track. // 1. Calculate the distance between adjacent control points. // 2. Calculate the distance that D moves in the direction AB and E moves in the direction BC. // 3. If the time increases by 100ms, then D and E will shift in the specified direction, and the displacement of F on DE can be obtained by AD/AB = DF/DE. // 4, calculate the coordinates of F according to the sines and cosines of DE and DE. 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)); Const DIST_BC = math.sqrt (math.pow (points[2][)'x'] - points[1]['x'], 2) + Math.pow(points[2]['y'] - points[1]['y'], 2)); Const EACH_MOVE_AD = DIST_AB/const EACH_MOVE_AD = DIST_AB /times; Const EACH_MOVE_BE = DIST_BC/const EACH_MOVE_BE = DIST_BC /times; Const TAN_AB = (points[1][)'y'] - points[0]['y']) / (points[1]['x'] - points[0]['x']); // Points [2] const TAN_BC = (points[2]]'y'] - points[1]['y']) / (points[2]['x'] - points[1]['x']); Const RADIUS_AB = math.atan (TAN_AB); // const RADIUS_AB = math.atan (TAN_AB); Const RADIUS_BC = math.atan (TAN_BC); // const RADIUS_BC = math.atan (TAN_BC); // execute each timefor (var i = 1; i <= times; Var dist_AD = EACH_MOVE_AD * I; Var dist_BE = EACH_MOVE_BE * I; 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); 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); Var tan_DE = (point_E[);'y'] - point_D['y']) / (point_E['x'] - point_D['x']); Var radius_DE = math.atan (tan_DE); Var dist_DE = math.sqrt (math.pow ((point_E[))'x'] - point_D['x']), 2) + Math.pow((point_E['y'] - point_D['y']), 2)); Var dist_DF = (dist_AD/DIST_AB) * dist_DE; 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

 };

 }
Copy the code

The annotations are very detailed, and the principle of the algorithm is actually very simple. Github address :github.com/xiongchenf/…


The method calls and the usage don’t take up a lot of space, it’s all basic stuff. The renderings are as follows:






This article is published in small program community (wxapp-union.com) reprint please indicate the source, thank you!