将线条延伸到屏幕边缘

Posted 2023-02-22

【中文标题】将线条延伸到屏幕边缘

【英文标题】：Extend line to edge of screen

【发布时间】：2015-01-19 01:11:46

【问题描述】：

我在 (0, 0, w, h) 处有一个边界框，其中某处有一个点 (x, y)，还有一个指向某个随机方向的方向向量 (dx, dy)，我是什么尝试做的是从该点沿该方向创建一条线到边界框的边缘。

看下图，黑点是点，箭头是方向向量，红线是我想要的结果线。

我现在做的是简单地将线延长向量乘以一些随机大数，保证将其放置在框外，然后使用线剪裁算法对其进行剪裁。这完全可行，但感觉就像一个非常hacky的解决方案，有没有更好的方法来做到这一点？

【问题讨论】：

如果痘是轴对齐的，您可以检查 dx、dy 的符号（查看哪些边可能相交）然后检查 (s1.x - x) / dx 之间哪个最小, 和 (s2.y - y) / dy。

我在一年前的一个 javascript 项目中需要完全相同的东西。如果你有兴趣，你可以看看code here，见函数intersectScreenEdge（向下滚动到评论区说“数学”）。请注意，此函数可以将点放置在给定距离的框外（参数o），因此在使用圆形帽进行绘图时是安全的。如果不需要，只需设置o = 0，或者在代码中忽略o。

我发现你的解决方案不是很老套，只要你能保证“随机大数”总是足够大以达到边缘（并且永远不会太大而不会引入浮点精度问题，或者可能还有其他意想不到的问题）。您可以简单地将长度设置为w + h 以确保安全（triangle inequality；您可以更接近对角线的长度，但这需要一个不必要的平方根）。 （假设您将它与 normalized dx, dy 向量相乘。）

【参考方案1】：

首先，如何找到与垂直线的交点。

设 (x0,y0) 为盒子内的点，(dx,dy) 为它的斜率。并假设您试图找到与垂直线 y=b 的交点。

x0+tdx 和 y0+tdy 是线上的点。因此该线与 y1 处的垂直线相交，使得 y1=y0+tdy=b (t>=0)。所以求解 t (t=(b-y0)/dy) 并使用相同的 t 得到 x1 = x0 + tdx。

同样你也可以找到与水平线的交点。

您应该找到线与两条边相交的四个点。在大多数情况下，其中两个的 t 为负值，丢弃它们。在另一个中，选择 t 最低的那个，这就是你的答案。

进一步优化：

根据 dx 和 dy 的符号，线可以与两条边之一相交。例如，如果两者都是正数，则它可能与顶部或右侧相交，依此类推。您可以只计算这两条边的 t，然后选择 t 最低的一条。

【讨论】：

这个好像应该可以了，我回家试试看！