定位涉及线和圆的交叉的小部件？

Question

这是我试图为我的游戏解决的问题。

我有这种情况：

我正在尝试解决绿色矩形的位置和大小。圆圈占屏幕的50％，40％，其半径与屏幕高度成正比。

绿色矩形必须始终与底部相距10个像素。它的左角也必须是10个像素。从图像中可以看出，从右上角到矩形接触圆圈的距离也是10像素。

另一个限制是绿色矩形必须始终比其高度（纵横比）宽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

第二个约束：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

此时它看起来几乎像一个二次方程。再补充一点：

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

二次方程有两种可能的答案，但其中一种将矩形放在圆的远端。消除这种情况应该很容易。

Answer 2

你有什么经典的圆线交叉问题。你知道线上的一个点 - 矩形的左下角。你知道线的斜率（从纵横比）。与之相交的圆圈可以是向左移动10的红色圆圈，为您提供10像素的间隙。交点将是所需矩形的右上角。这对于一个想法应该足够了。