如何为Hex Grid（六边形网格）添加点击位置文本？

解决方案步骤： #

1. 添加CSS样式，确保文本在六边形内居中显示：

.hexfield {
  position: relative;
}
.hex-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #333;
  pointer-events: none; /* 避免文本干扰六边形点击事件 */
}

2. 修改JavaScript代码，在hexclick事件中添加文本元素：

<script>
var rebuild = function () {
  var
    radius = parseInt($('#radius').val()), 
    columns = parseInt($('#columns').val()), 
    rows = parseInt($('#rows').val()), 
    cssClass = 'hexfield';

  $('#container').empty().hexGridWidget(radius, columns, rows, cssClass).on('hexclick', function (e) { 
     $('#logger').text('clicked [' + e.column + ',' + e.row + '] hex with center at [' + e.center.x + ',' + e.center.y + '] px');
     // 定位当前点击的六边形元素
     const targetHex = $(this).find(`.hexfield[data-column="${e.column}"][data-row="${e.row}"]`);
     // 检查是否已存在文本，不存在则创建
     if (!targetHex.find('.hex-text').length) {
       // 创建文本容器，这里用行列号作为示例文本，可自定义内容
       const textElement = $('<div class="hex-text"></div>').text(`${e.column}, ${e.row}`);
       targetHex.append(textElement);
     } else {
       // 可选：重复点击时替换文本或切换显示状态，示例为隐藏/显示文本
       targetHex.find('.hex-text').toggle();
     }
  });
  $('#container .hexfield').click(function () {
    this.classList.toggle('clicked');
  });
};
$('#rebuild').click(rebuild);
rebuild();
</script>

关键说明： #

• 借助插件自带的data-column和data-row属性精准定位点击的六边形
• 通过绝对定位+transform: translate(-50%, -50%)实现文本在六边形内居中
• pointer-events: none确保文本不会拦截六边形的点击事件
• 可根据需求调整重复点击的逻辑，比如替换文本内容或移除文本容器

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