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

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