Wie kann ich dies verbessern?

Question

Ich möchte einen anderen Stecker zu "A" Block zu "C" -Block hinzufügen. Wie kann ich die folgenden Snippets verbessern, um meine Anforderungen zu erfüllen? Siehe das Bild und jsfidle Link

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

Machen Sie das "von" und "zu" Elemente Parameter.

So etwas wie die folgenden funktionieren sollte:

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();