如何让JointJS的Paper中内容在全屏下实现类似Flexbox的垂直水平居中？

要实现未知数量元素的全屏居中，核心思路是先计算所有元素的整体边界范围，再根据Paper的尺寸计算偏移量，批量调整所有元素的位置，模拟Flexbox的align-items: center和justify-content: center效果。

具体实现步骤： #

• 计算所有元素的包围盒：遍历Graph中的所有节点/元素，获取它们的坐标与尺寸，算出整个内容区域的最小/最大X、Y坐标，从而得到内容的整体宽高。
• 计算居中偏移量：以全屏Paper的宽高为基准，计算内容需要偏移的距离：
  • 水平偏移：(Paper宽度 - 内容宽度) / 2 - 内容起始X坐标
  • 垂直偏移：(Paper高度 - 内容高度) / 2 - 内容起始Y坐标
• 批量移动所有元素：将偏移量应用到每个元素上，完成居中调整。

示例代码（以mxGraph为例） #

// 获取Graph实例与Paper容器
const graph = new mxGraph(document.getElementById('graph-container'));

// 计算内容整体边界
function getContentBounds(graph) {
  const cells = graph.getChildCells(graph.getDefaultParent(), true, false);
  if (cells.length === 0) return null;

  let minX = Infinity, maxX = -Infinity;
  let minY = Infinity, maxY = -Infinity;

  cells.forEach(cell => {
    const bounds = graph.getCellBounds(cell);
    if (bounds) {
      minX = Math.min(minX, bounds.x);
      maxX = Math.max(maxX, bounds.x + bounds.width);
      minY = Math.min(minY, bounds.y);
      maxY = Math.max(maxY, bounds.y + bounds.height);
    }
  });

  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
}

// 执行居中操作
function centerGraphContent(graph) {
  const contentBounds = getContentBounds(graph);
  if (!contentBounds) return;

  const paperWidth = window.innerWidth;
  const paperHeight = window.innerHeight;

  // 计算偏移量
  const offsetX = (paperWidth - contentBounds.width) / 2 - contentBounds.x;
  const offsetY = (paperHeight - contentBounds.height) / 2 - contentBounds.y;

  // 批量移动元素（确保事务性更新）
  graph.getModel().beginUpdate();
  try {
    const cells = graph.getChildCells(graph.getDefaultParent(), true, false);
    cells.forEach(cell => graph.moveCells([cell], offsetX, offsetY));
  } finally {
    graph.getModel().endUpdate();
  }
}

// 初始化居中 + 窗口 resize 时重新居中
centerGraphContent(graph);
window.addEventListener('resize', () => centerGraphContent(graph));

额外说明 #

• 若使用其他Graph库，核心逻辑完全通用：只需替换获取元素边界、移动元素的API即可。
• 记得处理空Graph的情况（无元素时跳过居中操作）。
• 绑定窗口resize事件，确保窗口尺寸变化时内容始终保持居中。

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