如何计算SVG六边形网格中六边形的最大适配宽度？

核心公式推导 #

已知画布固定宽度为W（如1000px），网格列数为cols，六边形边界框宽度为w（高度h = w * √3/2 ≈ 0.866w，与你现有逻辑匹配）。由于交错排列的特性，网格的最大宽度由偶数行最后一个六边形的右边缘决定，总宽度公式为：

W = w * (0.75 * cols + 0.625)

反推六边形边界框宽度，整理为分数形式避免浮点误差：

w = (8 * W) / (6 * cols + 5)

验证示例 #

以W=1000px、cols=3为例：

w = (8*1000)/(6*3+5) = 8000/23 ≈ 347.83px
h = 347.83 * √3/2 ≈ 300px

计算得到的总宽度为347.83*(0.75*3+0.625) ≈ 1000px，完全适配画布宽度。

代码实现思路 #

1. 用上述公式计算w和h；
2. 遍历每行每列，根据行的奇偶性计算六边形中心坐标：
   • 奇数行：第col个六边形的中心X坐标为 w/2 + col * 0.75*w
   • 偶数行：第col个六边形的中心X坐标为 w/2 + 0.375*w + col * 0.75*w
   • 中心Y坐标统一为 h/2 + row * h（垂直方向间距等于边界框高度h）
3. 根据中心坐标和w/h生成6个顶点，绘制SVG多边形。

代码片段 #

const canvasWidth = 1000;
const cols = 3;
const rows = 5;

// 计算六边形边界框尺寸
const w = (8 * canvasWidth) / (6 * cols + 5);
const h = w * Math.sqrt(3) / 2;

// 初始化SVG画布
const svg = document.getElementById('hexGrid');
svg.setAttribute('width', canvasWidth);
svg.setAttribute('height', rows * h);

// 生成六边形网格
for (let row = 0; row < rows; row++) {
  for (let col = 0; col < cols; col++) {
    // 计算中心坐标
    const centerX = row % 2 === 0 
      ? w / 2 + col * 0.75 * w 
      : w / 2 + 0.375 * w + col * 0.75 * w;
    const centerY = h / 2 + row * h;

    // 生成6个顶点（点朝上的六边形）
    const points = [
      [centerX - w/2, centerY],
      [centerX - w/4, centerY + h/2],
      [centerX + w/4, centerY + h/2],
      [centerX + w/2, centerY],
      [centerX + w/4, centerY - h/2],
      [centerX - w/4, centerY - h/2]
    ].map(pt => `${pt[0]},${pt[1]}`).join(' ');

    // 创建SVG多边形元素
    const hex = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    hex.setAttribute('points', points);
    hex.setAttribute('fill', '#e0e0e0');
    hex.setAttribute('stroke', '#333');
    svg.appendChild(hex);
  }
}

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