可交互/可点击的HTML图像图

Question

我想显示与下面类似的图形。我希望节点（A，B，C，...）可以单击，并从中显示一个弹出菜单，为用户提供他们想做的选择。

我知道我可以在画布上显示类似的内容，但是根据我的理解，我必须找出每个节点的坐标（可能有50多个）来编写单击函数。

我只是在寻找方法的方向，可以使用标准html，css，js或使用库（如果使用库，则需要图形在移动设备上可平移和交互）。 / p>

Answer 1

使用html <svg>标记（而非画布）轻松进行{​​{3}}。您还可以使用Vue / Angular获得更好的结果（简单的代码）。

Answer 2

我会用帆布做这件事。您肯定知道您将信件放在哪里。每当您输入字母时，只需存储其坐标并实现一个函数即可告诉您给定字母X，Y对是否在给定字母的矩形内。假设您存储了一个数组字母，其中有startX，startY，endX，endY成员，那么您可以执行以下操作：

function isInRectangle(letter, x, y) {
    return ((x >= letter.startX) && (y >= letter.startY) && (x <= letter.endX) && (y <= letter.endY));
}

function getClickedLetter(letters, x, y) {
    for (var letter of letters) if (isInRectangle(letter, x, y)) return letter;
    //by default returns undefined
}