長方形/正方形を描きたいのですが、その長方形のいずれかの辺をドラッグすると、最初の画像に示すように、長方形のその辺が円に変わるはずです。二次曲線
を使用して伸縮可能な側面を持つ長方形/正方形を描くことができましたが、長方形の側面を伸ばすと、2番目の画像に示すように、円としてではなく楕円または何かとして伸びるという問題があります。ベジェ曲線の
使用をお勧めするかもしれませんが、二次曲線のような単一の制御点が必要ですが、ベジェには2つあります(間違っている場合は修正してください)。
この問題に対する最善のアプローチを教えてください。
画像 - 欲しかったもの
画像 - 私が達成したこと
私がしたこと
これfiddleは私の仕事の結果を示しています。
長方形を描くには、マウスをクリックしてキャンバスにドラッグします。
ベジェ曲線の次数が高いほど、より多くの制御点が必要になります。二次曲線は二次ベジエ曲線であり、単一の制御点が必要です。2 つの制御点を持つベジエ曲線は 3 次です。次数 1 のベジェ曲線は実質的に直線です。ベジエ曲線の順序が有限であっても、完全な円弧を作成することはできません。
ちなみに、二次曲線は「楕円とか」ではなく、放物線です。
円弧が必要な場合は、円弧を使用する必要があります。それを制御するには、半径を変更する必要があります。実際には、円の中心を移動することでそれを行うことができます。
円弧は決して直線ではないため、直線を処理するには追加のロジックが必要になります。したがって、ドラッグ ポイントが直線上にある場合は線を描画し、そうでない場合は適切な半径で円弧を描画します。
したがって、次のような状況があるとします。
セグメントabは、長方形の直線でacbあり、目的の円弧です。yはセグメントの高さでx、ドラッグの水平オフセットです。との 3 点でr定義される円の半径を探しています。acb
これで、角度sdaは 1 回転/4 になり、sdはになり、 はr - xになりadますy / 2。ピタゴラスを使用すると、次のようになります。
r^2 = (r-x)^2 + (y/2)^2
=>
r^2 = (r-x)(r-x) + (y/2)^2
=>
r^2 = r^2 - 2rx + x^2 + (y/2)^2
=>
r^2 = r^2 - 2rx + x^2 + (y^2/4)
=>
0 = - 2rx + x^2 + (y^2/4)
=>
2rx = x^2 + (y^2/4)
=>
r = (x^2 + (y^2/4)) / 2x
=>
r = ((x^2) / 2x) + ((y^2/4) / 2x)
=>
r = (x/2) + ((y^2/4) / 2x)
=>
r = (x/2) + (y^2/8x)
ご覧のとおり、 is 0 の場合xは 0 による除算になります。そのため、このような場合は直線の描画に切り替える必要があります。
見つかった式 ( r = (x/2) + (y^2/8x)) を使用すると、円弧を描くための円の半径を決定できます。中心点を見つけるのは簡単です...
角度を見つけるには、サインの法則またはコサインの法則のいずれかを好みに応じて使用できますが、どちらもうまく機能します。三角形asb、三角形、asdまたは三角形adc(緑色) を使用して角度を見つけることができます。
簡単なアプローチとして、三角形asdを続けて、サインの法則を使用しましょう。
r / sin(turn/4) = (y/2) / sin(θ/2)
1/4 回転の正弦は 1 なので、次のように置き換えることができます。
=>
r / 1 = (y/2) / sin(θ/2)
=>
1 = (y/2) / sin(θ/2)
次に、角度について解きます。
=>
sin(θ/2) = (y/2)
=>
θ/2 = asin(y/2)
円弧を描く関数を呼び出すと、開始角度は -θ/2 になり、終了角度は θ/2 になります。
注: これはすべて、長方形の右側に対して行われたもので、他の側では調整が必要になります。