javascript - How to calculate a smooth curve between two points, where the curve's trajectory must begin and end at two

admin管理员组

文章数量:1024630

I have 2 points on a path (x1, y1) and (x2, y2). Both points has an angle value in degrees (a1 and a2 respectively). These are the angles that a curve intersecting these points must make with the y-axis when it intersects the associated (x, y) value.

For example, a curve that intersects points (x1, y1) and (x2, y2), must have a trajectory of a1 degrees at the point (x1, y1), and also a trajectory of a2 degrees at the points (x2, y2).

I wish to write a function that finds a curve that plies to the above scenario, but don't know where to start. Any help at all would be appreciated.

I have 2 points on a path (x1, y1) and (x2, y2). Both points has an angle value in degrees (a1 and a2 respectively). These are the angles that a curve intersecting these points must make with the y-axis when it intersects the associated (x, y) value.

For example, a curve that intersects points (x1, y1) and (x2, y2), must have a trajectory of a1 degrees at the point (x1, y1), and also a trajectory of a2 degrees at the points (x2, y2).

I wish to write a function that finds a curve that plies to the above scenario, but don't know where to start. Any help at all would be appreciated.

• javascript
• math
• geometry
• best-fit-curve

Share Improve this question Follow asked Aug 25, 2017 at 10:59 JailanJailan 2311 gold badge11 silver badge33 bronze badges 3

• 1 it's a math question without some code, you tried. – Nina Scholz Commented Aug 25, 2017 at 11:01
• 1 Bézier curve – ASDFGerte Commented Aug 25, 2017 at 11:13
• You can make such a curve out of straight line segments and circular arcs, with the straights being tangent to the arcs where they join. – dmuir Commented Aug 25, 2017 at 11:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You can use a bezier to create the curve you want. The control points define the curve tangent at the start and end points. Thus to set the angle at the start and end just define the control points to be along the angles.

The data

var x1 = ?;  // in pixels
var y1 = ?;
var x2 = ?
var y2 = ?;
var ang1 = ?;  // in radians
var ang2 = ?

Get the length of the line

var len =  Math.hypot(x2-x1,y2-y1);

Get the vectors for the angles and extend to about 1/3rd the len

var ax1 = Math.cos(ang1) * len * (1/3); 
var ay1 = Math.sin(ang1) * len * (1/3);

var ax2 = Math.cos(ang2) * len * (1/3); 
var ay2 = Math.sin(ang2) * len * (1/3);

Then draw

ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.bezierCurveTo(
    x1 + ax1, y1 + ay1,
    x2 - ax1, y2 - ay2,
    x2, y2
);
ctx.stroke();

Note that the angles must be in the same approx directions. If not the curve will go past the end point and then e back.

I have 2 points on a path (x1, y1) and (x2, y2). Both points has an angle value in degrees (a1 and a2 respectively). These are the angles that a curve intersecting these points must make with the y-axis when it intersects the associated (x, y) value.

For example, a curve that intersects points (x1, y1) and (x2, y2), must have a trajectory of a1 degrees at the point (x1, y1), and also a trajectory of a2 degrees at the points (x2, y2).

I wish to write a function that finds a curve that plies to the above scenario, but don't know where to start. Any help at all would be appreciated.

I have 2 points on a path (x1, y1) and (x2, y2). Both points has an angle value in degrees (a1 and a2 respectively). These are the angles that a curve intersecting these points must make with the y-axis when it intersects the associated (x, y) value.

For example, a curve that intersects points (x1, y1) and (x2, y2), must have a trajectory of a1 degrees at the point (x1, y1), and also a trajectory of a2 degrees at the points (x2, y2).

I wish to write a function that finds a curve that plies to the above scenario, but don't know where to start. Any help at all would be appreciated.

• javascript
• math
• geometry
• best-fit-curve

Share Improve this question Follow asked Aug 25, 2017 at 10:59 JailanJailan 2311 gold badge11 silver badge33 bronze badges 3

• 1 it's a math question without some code, you tried. – Nina Scholz Commented Aug 25, 2017 at 11:01
• 1 Bézier curve – ASDFGerte Commented Aug 25, 2017 at 11:13
• You can make such a curve out of straight line segments and circular arcs, with the straights being tangent to the arcs where they join. – dmuir Commented Aug 25, 2017 at 11:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You can use a bezier to create the curve you want. The control points define the curve tangent at the start and end points. Thus to set the angle at the start and end just define the control points to be along the angles.

The data

var x1 = ?;  // in pixels
var y1 = ?;
var x2 = ?
var y2 = ?;
var ang1 = ?;  // in radians
var ang2 = ?

Get the length of the line

var len =  Math.hypot(x2-x1,y2-y1);

Get the vectors for the angles and extend to about 1/3rd the len

var ax1 = Math.cos(ang1) * len * (1/3); 
var ay1 = Math.sin(ang1) * len * (1/3);

var ax2 = Math.cos(ang2) * len * (1/3); 
var ay2 = Math.sin(ang2) * len * (1/3);

Then draw

ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.bezierCurveTo(
    x1 + ax1, y1 + ay1,
    x2 - ax1, y2 - ay2,
    x2, y2
);
ctx.stroke();

Note that the angles must be in the same approx directions. If not the curve will go past the end point and then e back.

本文标签：