基于JavaScript+SVG的流程图编辑器：矩形间连接线绘制求助

嘿，这个问题我做流程图编辑器时也踩过坑！用中心点连线肯定会穿进矩形里，核心就是要算出两个矩形边缘上的最佳连接点——也就是从一个矩形边缘到另一个矩形边缘的线段，而不是中心到中心的直线。下面给你一步步讲怎么实现：

核心思路 #

我们可以先以两个矩形的中心点画一条辅助线，然后找到这条线和两个矩形边缘的交点——这两个交点就是你要的红色连线的端点。因为这条辅助线是两个矩形的“最短路径方向”，所以交点连线就是最自然的流程图连接线。

具体实现步骤 #

1. 定义矩形的基础参数 #

首先每个矩形得有明确的位置和尺寸：

• x/y: 矩形左上角的坐标
• width/height: 矩形的宽高
• 中心点坐标可以通过计算得到：cx = x + width/2，cy = y + height/2

2. 计算边缘交点的函数 #

写一个通用函数，传入矩形和目标矩形的中心点，返回当前矩形边缘上的连接点：

// 获取矩形到目标中心点方向上的边缘交点
function getEdgeConnectionPoint(rect, targetCenter) {
  const { x, y, width, height } = rect;
  const cx = x + width / 2;
  const cy = y + height / 2;
  // 计算从当前矩形中心到目标中心的向量
  const dx = targetCenter.x - cx;
  const dy = targetCenter.y - cy;

  let closestT = Infinity; // 记录最近的边缘参数值

  // 检查左右边界的交点
  if (dx !== 0) {
    // 左边界：x = rect.x
    const tLeft = (x - cx) / dx;
    if (tLeft > 0 && tLeft < closestT) closestT = tLeft;
    // 右边界：x = rect.x + width
    const tRight = (x + width - cx) / dx;
    if (tRight > 0 && tRight < closestT) closestT = tRight;
  }

  // 检查上下边界的交点
  if (dy !== 0) {
    // 上边界：y = rect.y
    const tTop = (y - cy) / dy;
    if (tTop > 0 && tTop < closestT) closestT = tTop;
    // 下边界：y = rect.y + height
    const tBottom = (y + height - cy) / dy;
    if (tBottom > 0 && tBottom < closestT) closestT = tBottom;
  }

  // 根据参数t计算最终交点坐标
  return {
    x: cx + closestT * dx,
    y: cy + closestT * dy
  };
}

3. 生成连线 #

有了上面的函数，就能轻松得到两个矩形的边缘连接点，然后用SVG的<line>元素绘制：

// 示例矩形数据
const rectA = { x: 100, y: 100, width: 150, height: 100 };
const rectB = { x: 400, y: 200, width: 150, height: 100 };

// 计算两个矩形的中心点
const centerA = { x: rectA.x + rectA.width/2, y: rectA.y + rectA.height/2 };
const centerB = { x: rectB.x + rectB.width/2, y: rectB.y + rectB.height/2 };

// 获取两个边缘连接点
const pointA = getEdgeConnectionPoint(rectA, centerB);
const pointB = getEdgeConnectionPoint(rectB, centerA);

// 创建SVG连线
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", pointA.x);
line.setAttribute("y1", pointA.y);
line.setAttribute("x2", pointB.x);
line.setAttribute("y2", pointB.y);
line.setAttribute("stroke", "red");
line.setAttribute("stroke-width", 2);
svgContainer.appendChild(line); // svgContainer是你的SVG容器元素

4. 拖拽矩形时更新连线 #

当拖拽矩形时，只需要在拖拽事件（比如mousemove或dragend）里重新计算连接点，然后更新<line>元素的属性即可：

// 假设rectA有拖拽事件监听
rectADragElement.addEventListener("mousemove", () => {
  // 更新rectA的x/y坐标（根据你的拖拽逻辑）
  rectA.x = newX;
  rectA.y = newY;

  // 重新计算中心点和连接点
  const newCenterA = { x: rectA.x + rectA.width/2, y: rectA.y + rectA.height/2 };
  const newPointA = getEdgeConnectionPoint(rectA, centerB);
  const newPointB = getEdgeConnectionPoint(rectB, newCenterA);

  // 更新连线属性
  line.setAttribute("x1", newPointA.x);
  line.setAttribute("y1", newPointA.y);
  line.setAttribute("x2", newPointB.x);
  line.setAttribute("y2", newPointB.y);
});

边界情况处理 #

• 矩形重叠：如果两个矩形部分重叠，这个方法依然能算出正确的边缘交点（从非重叠的边缘延伸）；如果完全重叠，你可以加个判断，比如隐藏连线或者取矩形的外边缘。
• 矩形包含关系：当一个矩形完全在另一个内部时，函数会自动找到外层矩形的边缘和内层矩形的边缘交点，符合流程图的视觉逻辑。

内容的提问来源于stack exchange，提问作者Korbson