如何計算兩點之間的平滑曲線，其中曲線的軌跡必須以兩個給定角度開始和結束

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

請注意，角度必須在大致相同的方向。如果不是，曲線將會越過終點，然後回來。