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.

Technical points mainly applied: 1. WXSS layout of small program, and data binding. 2, JS quadratic Bezier curve algorithm.

The core algorithm, written in app.js.

Bezier: function (points, times) {// 0, take 3 control points as an example,A,B,C,AB set point D,BC set point E,DE set point F, then the final Bezier curve is the coordinate trajectory of point F. // 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/times; const EACH_MOVE_AD = DIST_AB/times; Const EACH_MOVE_BE = DIST_BC/times; AB / / point of tangent const TAN_AB = (points [1] [' y '] - points [0] [' y '])/(points [1] [' x '] - points [0] [' x ']); / / point of BC tangent 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 for (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); / / the tangent value of the line segment DE var tan_DE = (point_E [' y '] - point_D [' y '])/(point_E [' x '] - point_D [' x ']); Var radius_DE = math.atan (tan_DE); / / cities DE spacing var dist_DE = math.h SQRT (math.h pow ((point_E [' x '] - point_D [' x ']), 2) + math.h 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:





Author: X837195936


Original address:
Small program two Bezier curve, shopping cart product curve flying into effect – actual battle tutorial – small program community – wechat small program development community – small program development forum – wechat small program alliance