Javascript html canvas组织线条以防止重叠

Question

我正在为标签练习制定一些逻辑。

我想将每个红点连接到一个蓝点，但没有重叠的线条。 （不是如下所示）

我有一个jsfiddle生成点并在这里连接它们

https://jsfiddle.net/s1u7okd5/

<Resource factory="com.mycompany.MyEncryptedPasswordFactory" username="user" password="encryptedPassword" ...other options... />

<Resource factory="com.mycompany.MyEncryptedAtomikosPasswordFactory" type="com.atomikos.jdbc.AtomikosDataSourceBean" xaProperties.user="user" xaProperties.password="encryptedPassword" ...other options... />

红点可以变化，显然，蓝点是固定的。我不需要有人为我做这项工作，但我可以做一些指导。

问题：

1：我认为总能找到线条不重叠的解决方案（忽略绘制线条的粗细）。这是真的吗？

2：我希望避免蛮力的做法。这可能吗？

Answer 1

假设红点（N）的数量等于蓝点的数量（从图片看起来如此），一个非常天真的解决方案可以是：

1. 计算所有对之间所有可能链接的长度blueDot-redDot（时间复杂度O（N ^ 2））;
2. 通过增加距离（O（Nlog（N）））排序链接;
3. 直到仍然没有选择bluePoint：
   1. 提取较短的链接;
   2. 检查关联的bluePoint和redPoint是否已经涉及其他链接（如果在由点ID索引的数组中存储标记，则为O（1））：
   3. 如果是：放弃链接;
   4. 如果否：连接点并将它们标记为已选中。

可能会有一些优化，但这无论如何都是迭代的O（N ^ 2）解决方案：比蛮力解决方案好得多，例如，使用回溯来探索所有可能性并找到正确的解决方案。