六边形网格高亮函数生成椭圆而非圆形的修复咨询

• 核心问题：误用屏幕坐标计算距离导致椭圆范围
  你当前的高亮逻辑大概率是基于屏幕像素的欧氏距离判断，而六边形网格的宽高比为 2:√3（约1.15:1），直接用屏幕距离会把六边形网格的“圆形”范围拉伸成椭圆。必须改用六边形网格专属的坐标系统来计算距离。

• 改用六边形轴向/立方体坐标计算距离
  六边形网格的“圆形”范围（即N环内的所有六边形）需要用六边形坐标系的距离公式判断，而非笛卡尔坐标系。实现步骤：

  1. 给每个六边形绑定网格坐标（q列，r行），生成网格时就把这两个值存入元素的自定义属性（比如data-q、data-r）或对应对象中。
  2. 实现六边形距离计算函数：

     // 立方体坐标下的六边形距离计算（轴向坐标转换后）
     function getHexDistance(q1, r1, q2, r2) {
       const s1 = -q1 - r1;
       const s2 = -q2 - r2;
       return (Math.abs(q1 - q2) + Math.abs(r1 - r2) + Math.abs(s1 - s2)) / 2;
     }
     

  3. 点击六边形时，获取其q、r值，遍历所有六边形，用上述函数计算距离，当距离≤设定半径时，添加高亮类。

• 修正网格行列的偏移处理
  你的六边形是交错排列的（奇数行/列有偏移），需要确保网格坐标的记录和屏幕坐标的转换逻辑一致：

  • 若为点向上的六边形排列，屏幕坐标转换公式应为：

    function hexToPixel(q, r, hexSize) {
      const x = hexSize * 1.5 * q;
      const y = hexSize * Math.sqrt(3) * (r + 0.5 * (q % 2));
      return {x, y};
    }
    

  • 这里q%2处理了奇数列的y轴偏移，确保网格坐标和屏幕坐标一一对应，避免计算距离时出现偏移误差。

• 替换当前的高亮判断逻辑
  删掉基于屏幕坐标的距离判断，改为基于网格坐标的距离筛选。比如在点击事件中：

  hexElement.addEventListener('click', () => {
    const clickedQ = parseInt(hexElement.dataset.q);
    const clickedR = parseInt(hexElement.dataset.r);
    const radius = 2; // 设定的高亮半径
  
    document.querySelectorAll('.hex').forEach(el => {
      const q = parseInt(el.dataset.q);
      const r = parseInt(el.dataset.r);
      if (getHexDistance(clickedQ, clickedR, q, r) <= radius) {
        el.classList.add('highlight');
      } else {
        el.classList.remove('highlight');
      }
    });
  });
  

内容的提问来源于stack exchange，提问作者Abundant.Absurdity