Question

我有一个问题，为此制作简化代码。简而言之，我需要在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>

当你点击一些它会改变颜色时，这是几个墙壁的迷宫，所以我需要点击一下来绘制所有连接的，无论应用哪个墙壁点击。在全尺寸范围内，这些墙壁几乎有数千个，有些是相连的，有些则没有。我试图学习递归函数，但很容易超出堆栈大小。请帮助，我会很感激。

Answer 1

我的伪代码版本：

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
}

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

欢呼声

Answer 2

有一个目的函数：getIntersectionList与getBBox配对可以帮助您解决问题。伪代码：

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)
 }
}

我会尝试使用jsFiddle制作实际代码，稍后会发布地址......

编辑请参阅this小提琴，但似乎Firefox没有＆＃39;仍然实现了所需的getIntersectionList。那么如果我们必须自己制作，那么如果我们缓存这些列表肯定是最好的，因为它会成为一种相当昂贵的方法......

编辑我修改过小提琴＆＃39;代码，只适用于本地文件，现在在Chrome中运行正常，但是墙壁只是触摸，getIntersectionList不起作用。因此，我们必须实施我们自己的版本......稍后再见......

编辑好吧，最后小提琴似乎奏效了。请注意，墙必须对其端点进行排序（x2> = x1，y2> = y1），您可以在该墙上看到黄色（已校正）和绿色（仍然错误）的效果。

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

2 个答案: