javascript - SVG绘制两个矩形之间的连接线

Question

我目前正在 javascript 中编写图表编辑器与 SVG .

我遇到了一个关于矩形之间连接的问题。我找到了很多资源来绘制圆圈之间的联系，但没有关于矩形的内容。

所以现在我得到的是我可以通过用鼠标拖动线在两个矩形之间绘制一条连接线，但连接显示在它们内部，因为我从矩形的中点计算连接。

正如您在下图中看到的那样，我自己做了一些想法，但我没有完成最后一步。

我只想绘制标记为红色的线。



稍后我想拖动矩形和线应该更新但现在我只需要计算这条线。

有人有好的建议吗？

Answer 1

假设您有两个矩形，并且您知道它们的中心( cx1 ， cy1 )和( cx2 ， cy2 )。你也有宽度和高度除以 2 (即从中心到侧面的距离):( w1 ， h1 )和( w2 ， h2 )。

它们之间的距离为:

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

在哪里 getIntersection是:

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

这是一个例子:

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>