2つの点の間で滑らかな曲線を計算する方法。曲線の軌跡が2つの角度で始まり、終わらなければならない

Question

私はパス（x1、y1）と（x2、y2）上に2点を持っています。両方の点の角度値は度（a1とa2）です。これらは、これらの点を交差する曲線が、関連する（x、y）値と交差するときにy軸となす角度です。

たとえば、ポイント（x1、y1）と（x2、y2）と交差する曲線は、ポイント（x1、y1）でa1度の軌道とポイントでa2度の軌跡（x2、y2）となる。

私は、上記のシナリオに適合するカーブを見つけるが、どこから開始するのかわからない関数を作成したいと考えています。助けを借りていただければ幸いです。

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

角度は同じ方向でなければならないことに注意してください。そうでなければ、カーブは終点を過ぎて戻ります。