用于在迷宫中绘制连接墙的Javascript函数？

我有一个问题，为此我为express it编写了简化的代码。简而言之，我需要用Javascript构建代码来绘制连接的SVG行。简单的例子是：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

<line x1="50" y1="50" x2="200" y2="50" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="100" y1="100" x2="400" y2="100" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="300" y1="300" x2="200" y2="300" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="100" y1="50" x2="100" y2="400" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="300" y1="100" x2="300" y2="300" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="200" y1="300" x2="200" y2="200" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />

<script type="text/javascript"> 
<![CDATA[
function fillWall(evt) {
  var tgt=evt.target;
  tgt.setAttributeNS(null, "stroke", "firebrick");
}
]]>
</script>
</svg>

这是一个迷宫，当你点击一些墙时，它会改变颜色，所以我需要一次点击来绘制所有连接的墙，无论在哪面墙上点击。在全尺寸范围内，这些墙有近千堵，有些是相连的，有些是不相连的。我试图学习递归函数，但很容易超过堆栈大小。

---

请帮忙，我会很感激我的一个巨大的。

伪代码版本：

function doWall(I_oWall) {
    if I_oWall.painted then return;
    I_oWall.paint();
    for each wall in walls
        if I_oWall.isAdjacentTo(wall) then
            doWall(wall);
        end if
    loop
}

对不起，我知道这不是一个完整的答案，但我认为它将真正帮助您解决您的问题

---

干杯

有一个专门的功能：与 可以帮你解决你的问题。伪代码：

fillWall(evt) {
 fillConnected(evt.target, [])
}
fillConnected(node, filled) {
 if (!filled.contains(node)) {
   fill(node);
   filled.append(node);
   foreach(n in document.getIntersectionList(node.getBBox()))
    fillConnected(n, filled)
 }
}

我将尝试使用JSFIDLE编写实际代码，稍后将发布地址

编辑参见fiddle，但Firefox似乎还没有实现所需的getIntersectionList。如果我们必须自己制作，最好是缓存列表，因为这将是一种成本相当高的方法

编辑我修改了fiddle的代码，该代码仅适用于本地文件，现在在Chrome中运行良好，但在墙刚刚接触的地方，getIntersectionList不起作用。所以我们必须实现我们自己的版本。。。再见

---

编辑好了，小提琴终于起作用了。请注意，墙的端点必须进行排序（x2>=x1，y2>=y1），您可以在墙上看到黄色（已更正）和绿色（仍然错误）的排序效果。

是否要为任何重叠线上色。是这样吗？@Amaan如果你指的是交叉的线-不。不会有这种情况，只有有连接点但没有交叉的线。如果一堵墙连接到最多两堵墙，这是一个必须实现的二叉树递归。这真的很简单，并且在互联网上有很好的记录。@Sebas wall可能每个都有两个以上的墙连接。我添加了投票以引起您的注意，但问题更复杂…thx。尝试在我的示例中解决它，您会发现。至少对我来说它是复杂的。这是一样的，只需构建自己的对象模型：墙对象实际上是一条线……是的，它是一条线，我只是将其表示为墙。请注意，直线由两个点和两个点之间的空间确定。它在不同的点上与其他线接触，反之亦然。我认为这个函数必须随着递归而动态变化。在墙上实现这个逻辑。我很欣赏这一点。我认为getIntersectionList不是最好的方法，尽管在浏览器中的实现有问题。我通过使用x1，y1，x2，y2属性得到了最好的结果。就是这样。端点值的排序是最简单的部分。请检查您的acc.pts，非常感谢。谢谢您的提问。我也在学习SVG，我发现帮助完成一些基本任务是值得的。有什么方法可以给你发送个人信息吗？你可以发邮件到carlo erboristeriasantanna.it