線と円の交差を含むウィジェットの配置？

Question

私のゲームで解決しようとしている問題はここにあります。

私はこのシナリオを持っている：

私は緑色の四角形の位置と大きさのために解決しようとしています。円は画面の50％、40％にあり、その半径は画面の高さに比例します。

緑の四角形は、常に下から10ピクセル離れている必要があります。その左隅も10ピクセル離れている必要があります。そして、画像で見られるように、右上隅から矩形が円に触れるまでの距離も10ピクセルです。

もう1つの制約は、緑色の矩形が常にその高さ（縦横比）の3倍の幅でなければならないことです。

緑の四角形の位置とサイズはどのように解決できますか？

基本的に、ゲームウィンドウにはさまざまなアスペクト比があるため、緑色の四角形はこれらの状況で良好に見える必要があります。

私は必ずしもコードを探しているわけではありませんが、これがどのように解決できるかについてのアイデアです。

ありがとうございました

Answer 1

これらの状況で行うべきことは、制約を数学的に記述し、単純化するかどうかを確認することです。これは幾何学的処理に不可欠なスキルです。

画像領域の左下隅を（0,0）とします。これは、矩形の左下隅を（10,10）に置きます。右上のコーナー（x1、y1）を呼び出します。私はあなたがすでに円がどこから来るかを計算したと仮定します。それはかなり簡単ですから、中心（x2、y2）と半径rを呼び出します。

最初の制約：長方形は、縦の3倍の幅です。

x1-10 = 3 * (y1-10) or x1 = 3 * (y1-10) + 10 or x1 = 3*y1 - 20 

第2の制約：x1、y1は、円から10ピクセル離れています。最初の10ピクセルより大きな別の円を描くと、その点がその上に横たわります。

(x1-x2)^2 + (y1-y2)^2 = (r+10)^2 

X1を置換：

(3*y1 - 20 - x2)^2 + (y1-y2)^2 = (r+10)^2 

R、X2、およびY2が知られているので、これは、素晴らしいです。唯一知られていない左はy1です。すべてのy1を一緒に集めることができるかどうかを見てみましょう。

(3*y1 + (-20 - x2))^2 + (y1-y2)^2 = (r+10)^2 
3^2*y1^2 + 2*(3*y1*(-20-x2) + (-20-x2)^2 + y1^2 + 2*y1*-y2 + y2^2 = (r+10)^2 
3^2*y1^2 + y1^2 + 6*(-20-x2)*y1 + 2*-y2*y1 + y2^2 = (r+10)^2 
(3^2+1)*y1^2 + (-120 - 6*x2 - 2*y2)*y1 + y2^2 = (r+10)^2 

この時点では、ほぼ2次方程式のように見えます。もう少し少し微調整：

10 * y1^2 + (-120 - 6*x2 - 2*y2) * y1 + (y2^2 - (r+10)^2) = 0 

最後のステップは、Quadratic Formulaを適用することです。

a*y1^2 + b*y1 + c = 0 
a = 10 
b = (-120 - 6*x2 - 2*y2) 
c = (y2^2 - (r+10)^2) 
y1 = (-b +/- sqrt(b^2 - 4*a*c))/2*a 

2次方程式から2つの可能な答えがありますが、そのうちの1つは円の遠い側に長方形を置きます。そのようなケースを排除するのは簡単なはずです。

Answer 2

古典的な円線の交差問題があります。線の上の点 - 矩形の左下隅を知っている。そして、線の傾き（縦横比から）を知っています。あなたが交差するサークルは、あなたの10ピクセルのギャップを与えるために10だけ左にシフトされた赤い円になります。交差点は、目的の矩形の右上隅になります。それはアイデアのためには十分であるはずです。