javascript - 在 Canvas 中动态添加下拉菜单

Question

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

下拉菜单的例子

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

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. 页面上已经有一个不可见的下拉框，在 canvas 元素之外
2. 点击 Canvas 时，检查用户是否点击了六边形。 (检查鼠标点击的距离是否在屏幕上任何六边形的范围内)
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 中的所有代码，因为我相信您可能想采用我在生成原子/键/等方面所做的方法。