Svg draw connection line between two rectangles

Question

I am currently programming a diagram editor in javascript with SVG .

I am stuck with a problem concerning connection between rectangles. I found a lot of resources to draw a connection between circles but nothing about rectangles.

So now what I got is that I can draw a connection line between two rectangles by dragging the line with the mouse but the connection is displayed inside them because i calculate the connection from the middle point of the rectangles.

As You can see in the picture below I made myself some thoughts but i don't get the final step.

I just want to draw the line that is marked red.

Later on i want to drag the rectangles and the line should be updated but for now i just need to calculate this line.

Somebody got a good suggestion?

Answer 1

Say you have two rects and you know the center of them ( cx1 , cy1 ) and ( cx2 , cy2 ). You also have the width and height divided by 2 (ie the distance from the center to the sides): ( w1 , h1 ) and ( w2 , h2 ).

The distance between them is:

var dx = cx2 - cx1;
var dy = cy2 - cy1;

Then you can calculate the intersection point for the two rects with:

var p1 = getIntersection(dx, dy, cx1, cy1, w1, h1);
var p2 = getIntersection(-dx, -dy, cx2, cy2, w2, h2);

Where getIntersection is:

function getIntersection(dx, dy, cx, cy, w, h) {
  if (Math.abs(dy / dx) < h / w) {
    // Hit vertical edge of box1
    return [cx + (dx > 0 ? w : -w), cy + dy * w / Math.abs(dx)];
   } else {
    // Hit horizontal edge of box1
    return [cx + dx * h / Math.abs(dy), cy + (dy > 0 ? h : -h)];
    }
};

Here's an example:

 var rect1 = document.getElementById('rect1'); var rect2 = document.getElementById('rect2'); var cxn = document.getElementById('connection'); updateConnection(); function updateConnection() { // Top left coordinates var x1 = parseFloat(rect1.getAttributeNS(null, 'x')); var y1 = parseFloat(rect1.getAttributeNS(null, 'y')); var x2 = parseFloat(rect2.getAttributeNS(null, 'x')); var y2 = parseFloat(rect2.getAttributeNS(null, 'y')); // Half widths and half heights var w1 = parseFloat(rect1.getAttributeNS(null, 'width')) / 2; var h1 = parseFloat(rect1.getAttributeNS(null, 'height')) / 2; var w2 = parseFloat(rect2.getAttributeNS(null, 'width')) / 2; var h2 = parseFloat(rect2.getAttributeNS(null, 'height')) / 2; // Center coordinates var cx1 = x1 + w1; var cy1 = y1 + h1; var cx2 = x2 + w2; var cy2 = y2 + h2; // Distance between centers var dx = cx2 - cx1; var dy = cy2 - cy1; var p1 = getIntersection(dx, dy, cx1, cy1, w1, h1); var p2 = getIntersection(-dx, -dy, cx2, cy2, w2, h2); cxn.setAttributeNS(null, 'x1', p1[0]); cxn.setAttributeNS(null, 'y1', p1[1]); cxn.setAttributeNS(null, 'x2', p2[0]); cxn.setAttributeNS(null, 'y2', p2[1]); } function getIntersection(dx, dy, cx, cy, w, h) { if (Math.abs(dy / dx) < h / w) { // Hit vertical edge of box1 return [cx + (dx > 0 ? w : -w), cy + dy * w / Math.abs(dx)]; } else { // Hit horizontal edge of box1 return [cx + dx * h / Math.abs(dy), cy + (dy > 0 ? h : -h)]; } }; function makeDraggable(evt) { var svg = evt.target; svg.addEventListener('mousedown', startDrag); svg.addEventListener('mousemove', drag); svg.addEventListener('mouseup', endDrag); function getMousePosition(evt) { var CTM = svg.getScreenCTM(); return { x: (evt.clientX - CTM.e) / CTM.a, y: (evt.clientY - CTM.f) / CTM.d }; } var selectedElement, offset; function startDrag(evt) { if (evt.target.classList.contains('draggable')) { selectedElement = evt.target; offset = getMousePosition(evt); offset.x -= parseFloat(selectedElement.getAttributeNS(null, "x")); offset.y -= parseFloat(selectedElement.getAttributeNS(null, "y")); } } function drag(evt) { if (selectedElement) { var coord = getMousePosition(evt); selectedElement.setAttributeNS(null, "x", coord.x - offset.x); selectedElement.setAttributeNS(null, "y", coord.y - offset.y); updateConnection(); } } function endDrag(evt) { selectedElement = null; } } 

 .static { cursor: not-allowed; } .draggable { cursor: move; fill: #007bff; fill-opacity: 0.1; stroke: #007bff; stroke-width: 0.2; } #connection { stroke-width: 0.1; stroke: red; } 

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20" onload="makeDraggable(evt)" width="400" height="200"> <rect id="rect1" class="draggable" x="4" y="5" width="4" height="3"/> <rect id="rect2" class="draggable" x="18" y="5" width="3" height="5"/> <line id="connection" /> </svg>