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

Question

我在路径（x1，y1）和（x2，y2）上有2个点。两个点都有一个度数角度值（分别为a1和a2）。当它与相关的（x，y）值相交时，这些点与这些点相交的曲线必须与y轴形成的角度。例如，与点（x1，y1）和（x2，y2）相交的曲线必须具有在点（x1，y1）处的a1度的轨迹，并且还具有在点处的a2度的轨迹（x2，y2）。

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

Answer 1

您可以使用bezier创建您想要的曲线。控制点定义了起点和终点处的曲线切线。因此，要设置开始和结束的角度，只需将控制点定义为沿着角度。

数据

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/3日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); 

然后画

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

请注意，角度必须在大致相同的方向。如果不是，曲线将会越过终点，然后回来。