如何增强此功能

Question

我想将另一个连接器添加到“A”块到“C”块。我如何增强以下片段来达到我的要求？请参阅图像和jsfidle链接

https://jsfiddle.net/dw03zj39/

var divA  = document.querySelector("#a"); 
var divB  = document.querySelector("#b"); 
var connector = document.querySelector("#connector"); 

var drawConnector = function() { 
    var posnA = { 
    x: divA.offsetLeft + divA.offsetWidth, 
    y: divA.offsetTop + divA.offsetHeight/2 
    }; 
    var posnB = { 
    x: divB.offsetLeft, 
    y: divB.offsetTop + divA.offsetHeight/2 
    }; 
    var dStr = 
     "M" + 
     (posnA.x  ) + "," + (posnA.y) + " " + 
     "C" + 
     (posnA.x + 100) + "," + (posnA.y) + " " + 
     (posnB.x - 100) + "," + (posnB.y) + " " + 
     (posnB.x  ) + "," + (posnB.y); 
    connector.setAttribute("d", dStr); 
}; 

window.addEventListener("resize", drawConnector); 

drawConnector(); 

Answer 1

制作的 “从” 和 “到” 的元素参数。

类似下面应该工作：

var divA  = document.querySelector("#a"); 
var divB  = document.querySelector("#b"); 
var divC  = document.querySelector("#c"); 
var connector = document.querySelector("#connector"); 

var drawConnector = function(from, to) { 
    var posnA = { 
    x: from.offsetLeft + from.offsetWidth, 
    y: from.offsetTop + from.offsetHeight/2 
    }; 
    var posnB = { 
    x: to.offsetLeft, 
    y: to.offsetTop + to.offsetHeight/2 
    }; 
    var dStr = 
     "M" + 
     (posnA.x  ) + "," + (posnA.y) + " " + 
     "C" + 
     (posnA.x + 100) + "," + (posnA.y) + " " + 
     (posnB.x - 100) + "," + (posnB.y) + " " + 
     (posnB.x  ) + "," + (posnB.y); 
    connector.setAttribute("d", dStr); 
}; 

function drawAllConnectors() 
{ 
    drawConnector(divA, divB); 
    drawConnector(divA, divC); 
} 

window.addEventListener("resize", drawAllConnectors); 

drawAllConnectors();