如何检查两条用户绘制的（波浪形）线是否相交？

Question

我正在考虑制作游戏Sprouts 的在线版本，可能使用 JavaScript 网络浏览器图形库 p5.js

您可以阅读更多关于它的信息，但基本上有 2 个玩家用鼠标在点之间画线。线条可以是直的或以任何方式弯曲。其中一条规则是两条线不能交叉。

我还没有开始制作游戏，但是提前计划好了，除了一个问题之外，一切似乎都相对容易完成：

当用户画一条线时，我需要弄清楚这条线是否与另一条线相交。但是，由于这些线不是线性的，也不是我习惯的任何数学方法，似乎没有一种简单的数学方法可以检查交叉点。

如果我知道线上每个像素的位置，我将如何检查两条这样的线是否交叉？

我为没有代码道歉，我还没有开始它。如果您希望在答案中包含代码，您可以使用 psuedocode 或您可能熟悉的任何 gui 编程。但是，我更喜欢纯粹假设的答案，因为一切都在这个阶段。

以下是我的一些想法：

• 对于线上的每个像素，我可以检查是否有任何其他线具有相同位置的像素，在这种情况下它们重叠。这似乎效率低下，所以以下几点是我想出的其他方法，它更有效但不那么僵化和可靠。
• 在绘制线条之前，如果您确保所有线条都是一种颜色，对于线条上的每个像素，您可以检查该像素是否已经与线条颜色相同，使用类似 @ 987654322@ 如果是这样，中止画线。这种解决方案似乎容易出现许多问题并且有点脆弱。

这两种解决方案要么以效率换取可靠性，要么反之。您还知道其他解决方案吗？请记住，这将在浏览器中运行，因此效率很重要。

Answer 1

请记住，这将在浏览器中运行，因此效率很重要。

您需要让自己更好地了解哪种“效率”对您和您的用户很重要。您概述的两种方法对我来说似乎都是合理的。在您尝试并衡量其性能之前，我不会假设解决方案效率低下。

退后一步，通常您需要将行存储在某种数据结构中。您说线条不是数学的，但您可以将线条分解为单独的线段或点，这些 是数学的。这可以是线段数组、布尔值的二维数组、点图或四叉树。有很多选择。然后您需要检查这些线或点与其他玩家添加的新线或点之间的碰撞。

另一个需要考虑的选项是降低输入空间的分辨率。例如，也许你的游戏窗口是 500x500 像素，但你真的只需要游戏板是 100x100 可能的点位置。您可以放大 100x100 游戏板，使其显示为 500x500。这将提高您提出的任何解决方案的“效率”。

但是，在这一点上，我不会担心“效率”。您提到的任何一种解决方案似乎都很好。如果您发现问题，请使其正常工作，然后对其进行迭代。祝你好运。

Answer 2

可能是来自 Mike Bostock 的 this article，您可能会对 Sutherland-Hodgman 算法感兴趣。它与 2 个多边形而不是 2 条线的交集更相关，但它可能适合您的问题。