如何计算两点之间的平滑曲线,其中曲线的轨迹必须以两个给定角度开始和结束

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

我在路径 (x1, y1) 和 (x2, y2) 上有 2 个点。两个点都有一个以度为单位的角度值(分别为 a1 和 a2)。这些是与这些点相交的曲线在与关联的 (x, y) 值相交时必须与 y 轴成的角度。

例如,一条曲线与点(x1, y1)和(x2, y2)相交,在点(x1, y1)处必须有a1度的轨迹,在点(x1, y1)处也有a2度的轨迹点 (x2, y2).

我想编写一个函数来找到符合上述情况的曲线,但不知道从哪里开始。任何帮助都将不胜感激。

您可以使用贝塞尔曲线来创建您想要的曲线。控制点定义起点和终点处的曲线切线。因此,要在起点和终点设置角度,只需将控制点定义为沿角度。

数据

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

获取线的长度

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

获取角度的向量并扩展到 len

的大约 1/3
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);

然后画

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

请注意,角度必须大致相同。如果不是,曲线将越过终点然后返回。