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

Question

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

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

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

Answer 1

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

数据

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

获取线的长度

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

获取角度的向量并扩展到大约 1/3len

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();

请注意，角度必须在相同的近似方向上。如果不是，曲线将经过终点然后返回。