Question

我正在制作一个文档，通过用户输入构建树型图。我试图将样式的div连接到他们用画布线分支的相对div。我一直在使用.getBoundingClientRect()来获取位置，但div与内联块是静态的，因此每次添加新的时，整个结构都会发生变化。

所以，这是我尝试每次创建一个新分支时调用的'for循环'，以重新绘制所有画布线。

var lines = function(){
    var blocks=document.getElementsByClassName('block');
for (i=1;i<blocks.length-1;i++){
    var blockDiv = blocks[i]
    var offset = blockDiv.getBoundingClientRect();
    var xa = offset.left+40;
    var ya = offset.top+40;
    var blockFrom = blockDiv.parentNode.parentNode.previousSibling;
    var offsets = blockFrom.getBoundingClientRect();
    var yb = offsets.top+40;
    var xb = offsets.left+40;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.moveTo(xa,ya);
    ctx.lineTo(xb,yb);
    ctx.stroke();   
  }
}

这是一个jsfiddle，所以你可以看到div的一般结构。

当调用该函数时，我没有画布线和控制台错误 166 Uncaught TypeError: blockDiv.parentNode.parentNode.previousSibling.getBoundingClientRect is not a function
我对这个很难过，非常感谢你的帮助我是画布，javascript和编码的新手，所以任何其他建设性的批评也会受到高度赞赏。 :)

Vanilla js只是请！

Answer 1

问题在于：

基于Gecko的浏览器将文本节点插入到要表示的文档中源标记中的空格。因此获得了一个节点例如，使用Node.firstChild或Node.previousSibling可以引用a 空白文本节点而不是作者的实际元素意图得到。

https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

因此，请更改此行：

var blockFrom = blockDiv.parentNode.parentNode.previousSibling;

到此：

var blockFrom = blockDiv.parentNode.parentNode.previousSibling.previousSibling;

将画布线绘制到具有相同类名的所有div

1 个答案: