在画布中动态添加下拉菜单

Question

我想创建一个允许书写化学式的画布 这个想法是使用六边形，可以点击他的顶部来改变原子。因此，当我们单击六边形顶点时，会出现一个下拉菜单，我们可以在其中选择原子。 我可以将下拉菜单作为同级添加到画布并通过容器定位它，但是我如何动态地（通过鼠标单击）在画布上添加下拉菜单。

下拉菜单示例

欢迎任何想法，反思。 我制作了一个简单的六边形，它可以代表环己烷 有代码建议的人

var canvas = document.querySelector('#canvas').getContext('2d'),side = 0,
    size = 100,
    x = 100,
    y = 100;

canvas.beginPath();
canvas.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));

for (side; side < 7; side++) {
  canvas.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6));
}


canvas.stroke();

#canvas {
  width: 200px;
  height: 200px;
}

<canvas id="canvas" width="400" height="400"></canvas>

Answer 1

我会做的是：

1. 页面上已有一个不可见的下拉框，在画布元素之外
2. 单击画布时，检查用户是否单击了六边形。 （检查鼠标点击的距离是否在屏幕上任何六边形的范围内）
3. 如果它在六边形的范围内，请将不可见的下拉框移动到六边形的位置，然后将其变为可见。

如果您需要示例，请告诉我。

我在以下 CodePen 中编写了一个示例：https://codepen.io/darrylhuffman/pen/OqmBja

这是我用来确定用户是否点击了一个原子，然后移动下拉框的逻辑：

document.body.addEventListener('mouseup', e => {
    let atom = atoms.find(a => distance(a.position, { x: e.pageX, y: e.pageY}) <= a.r)
    atomDropdown.classList.remove('hidden')
    if(atom){
       atomDropdown.style.left = atom.position.x + 'px'
       atomDropdown.style.top = (atom.position.y + atom.r) + 'px'
    }
})

请务必阅读我在 CodePen 中的所有代码，因为我相信您可能希望采用我在生成原子/键/等时采用的方法。