均一な2次曲線を描く

Question

私は、キャンバスに矢印を描くことができるプロジェクトを作成しようとしています。そのためには曲線が必要です。

あなたは1次曲線はそのような何かによって表される知っているように： M 65 100 Q 300、100、300、20

最初の2つの数字（65、100）始点座標を表し、最後の2つ（300,20）は終点座標（矢印終点）を表す。 最初のポイントと2番目のポイントに基づいて真ん中の2つの数字を計算し、見栄えの良い曲線にする必要があります。

最初のポイントの座標はmousedownで、2番目のポイントはmouseupです。

今のところ私はこのように使っています。

function addCurve(Ax, Ay, Bx, By){ 
canvas.add(new fabric.Path('M '+ Ax +' '+ Ay +' Q 100, 100, '+ Bx +', '+ By +'', { fill: '', stroke: 'red' })); 
} 
addCurve(100,0,200,0); 

したがって、均一な曲線を得るために中点座標を計算する方法はありますか？ このプロジェクトではfabric.jsも使用しています。 2つのエンドポイント

x1 = ? // start point 
y1 = ? 
x2 = ? // end point 
y2 = ? 

と

Answer 1

最初のスタートは、あなたが最初から第二の点

vx = x2 - x1; 
vy = y2 - y1; 

ラインでのベクトルが必要になります

mx = (x1 + x2)/2; 
my = (y1 + y2)/2; 

中間点を取得するには開始点と終了点から90°（時計回りまたは右向き）は

です

px = -vy; // perpendicular 
py = vx; 

直線は、2点間の距離と同じ長さです。二次曲線は、制御点が線からの距離の半分に伸びます。だから我々は、曲線の長さによって1/4になりたいならば、半分のpベクトルとあなたはカーブが他の方法

cx = my - px/2; 
cy = my - py/2; 

それともを曲げるようにしたい場合は中間点に

cx = mx + px/2; // get control point 
cy = my + py/2; 

を追加VAR

var curveAmount = 0.25; // How far out the curve is compared to the line length 

cx = my - px * (curveAmount * 2); 
cy = my - py * (curveAmount * 2); 

ような曲線の量とそれを書くことができることは少ないためcurveAmountは、より多くのカーブのための大きな小さくしてください。カーブが全くない場合はゼロ、反対の場合はマイナスの値を返します。