在对角线段中获取点的算法

Posted 2023-05-08

【中文标题】在对角线段中获取点的算法

【英文标题】：Algorithm to get a point in a diagonal segment

【发布时间】：2013-05-20 11:32:21

【问题描述】：

看看这张图片（抱歉，我的作品机器上只有画笔）：

您会看到两个黑色矩形，一个主要的和一个次要的，在主要内部。考虑他们是divs。 红点是每个点的中心点（顶部和左侧）。

绿色矩形是一个心理（不是在屏幕上绘制）边界，对称地包含主要反应角，它是由 javascript 计算的。

蓝线是这两个红点的对角线段。

我已经在 J​​avaScript 上计算了上述对象的所有位置。

黄点是我想要得到的点。它必须在红点的对角线上，但在边界（绿线）。它不能在外面或里面。

我用我的算法创建了这个jsFiddle。如您所见，黄色点位于绿色边界之外。它必须在对角线段并且超过绿线限制。

对这个算法有帮助吗？

【问题讨论】：

算法目前完全忽略了绿框。考虑由您计算的两个中心形成的直线方程。然后考虑绿色框的垂直线左侧的方程，以及水平线顶部的方程（这些显然是微不足道的，如果绿色左侧/顶部是坐标系轴，则y = 0或x = 0）。使用标准代数，您可以找到哪一个与您确定的中心线相交以及相交的坐标。

@mbratch 对不起，你的回答似乎很简单，但我无法想象在我的代码中要做什么来遵守它。

NP。看起来萨乔省去了我在他的答案中拼出方程式的麻烦。 :)

【参考方案1】：

更多关于斜坡：https://www.khanacademy.org/math/algebra/linear-equations-and-inequalitie/slope-and-intercepts/v/slope-of-a-line

您可以使用点斜率公式在一条线上查找点（以便找到与绿色顶线相交的点）：

(x1, y1) - one of the red points
(x2, y2) - another of the red points
(x, y) - the green point
slope = (y2 - y1) / (x2 - x1) 
y - y1 = slope * (x - x1)

编辑：感谢 Imre Kerr：

现在，您已经有了点的 y（如果您的线与顶部的绿线相交）或点的 x（如果它与左侧的绿线相交）。从这里，你可以找到另一个坐标。假设您与顶线 (http://jsfiddle.net/BGSacho/TDH7q/6/) 相交的示例。

【讨论】：

是否有可能绿色盒子足够高（或者，换句话说，主盒子离绿色盒子的顶部足够远）以至于对角线与左侧相交而不是顶部？

非常感谢您。如果可以的话，我会为你的答案投票十次。

@mbratch：这可能会发生。如果您尝试求解 x 并且结果小于绿色框的左侧，您就会知道。那么这只是一个简单的解决 y 的问题，而 x 是常数。

@ImreKerr 以及求解 y 的算法是什么？

y = 斜率 * (x - x1) + y1。只需重新排列方程式即可。