HTML图像映射与多个div元素

Question

我正在实现一个Angular组件，它有许多用户可以点击的小区域。 我看到了两种方法：

1. 使用背景图片并定义用户可以点击的地图区域，在图片上添加点击处理程序。
2. 对每个可点击部分使用div并将点击处理程序附加到父元素（因此我在每个div上没有很多点击处理程序）。使用CSS来设置每个div的样式，使其看起来像1中的图像。

1.问题是当图像改变时我也必须改变地图坐标。 这里的优点是它在许多浏览器中应该没有问题。

2.的优点是我可以根据需要设置组件的样式（因此它可以是更小，更大，不同的字体等），但是当我需要显示多个这样的字符时，它会对性能产生影响成分

您会选择哪种方式？为什么？或者还有其他可能吗？

编辑： 忘记提及组件也应该在移动设备上运行

Answer 1

我不记得在哪里，但我刚读了一篇很好的文章：

div（webkit-transform） vs svg vs canvas

简化：

• 1-50 elements = divs＆amp;图片

• 50-500元素= svg

• 500多个元素= 画布

这只是为了给你一个想法......然后一切都取决于每个元素和设备。

---

Canvas是所有内容的最佳解决方案。

画布上的问题是单击处理程序。您需要创建一个碰撞检测脚本。 （我使用带有背景图像的画布（世界地图），以实时显示当前用户的点。）。但它不可点击......（地图下方/上方有可点击的图例）

SVG可能是您案例中最好的解决方案

和@mainguy一样，你可以画东西并添加eventHandlers（或者像父元素一样）。性能优于div。

<强> DIVS

大多数时候我使用div set和一个eventhanlder。它们很容易使用和风格..但只有正方形或圆形..如果你开始设计它们你松散很多性能（盒阴影..）。 如果你没有设置div的样式，你可以使用很多。特别是如果你把eventhandler放在parentNode上。 这样你可以毫无问题地处理1000个元素。（但不要使用position:absolute）

图片地图

再次......如果没有太多的元素，这也是一个很好的解决方案..最简单的...（绘制简单形状的最简单方法）。很快就有了静态MAP值，你就可以了转换你的imagesize用比率重新计算地图..所以这不是问题。

---

如果没有很多元素，我会选择图像映射。

其他SVG。

一切都取决于你拥有多少元素。

---

  

  
1. 是图像更改时我必须更改地图坐标
  

如果您使用div，则无需更改坐标？

** 移动设备支持的不仅仅是浏览器。

Answer 2

我会使用SVG库来实现这一点，这些库很快，易于设计并且被大多数浏览器所支持。

D3.js 可用于Angular作为指令。尚未与他合作过。但它似乎很受欢迎。只需在他们的主页上查看WOW！效果。

Raphaël JS 我在许多项目中使用过。它具有很大的优势，它甚至支持旧的IE（原文！）。

只需搜索Angular SVG和/或JS，您就会找到很多解决方案。

Answer 3

不知道确切的要求，我的默认选择是2.

存在缺点，例如我们无法轻松映射非矩形区域。然而，优点是巨大的，包括易于维护，可能的响应性，更强大的造型可能性等等。

唯一数量的div不应该导致任何问题，我不会担心。

但有些情况下，我会寻找不同的实现方式。