javascript - HTML 图像映射与多个 div 元素

Question

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

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

问题 1. 是当图像改变时我也必须改变 map 坐标。这里的优点是它应该可以在许多浏览器中正常工作。

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

您会选择哪种方式，为什么？还是有其他的可能？

编辑:忘了说这个组件也应该在移动设备上工作

Answer 1

我不记得在哪里，但我刚刚读了一篇关于:

的好文章

div(webkit-transform) 对比 svg 对比 canvas

为简单起见:

• 1-50 个元素 = div 和图像

• 50-500 个元素 = svg

• 500 及更多元素 = canvas

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

---

Canvas 将是解决所有问题的最佳解决方案。

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

SVG 可能是您情况下的最佳解决方案

就像@mainguy 说的那样，你可以绘制东西并添加事件处理程序(或在父元素上添加事件处理程序)。性能比 div 更好。

DIVS

大多数时候我使用带有一个 eventhanlder 的 div 集。它们非常易于使用和设置样式……但只有正方形或圆形……如果您开始设置它们的样式，您会失去很多性能(框阴影……)。如果你不设置 div 的样式，你可以使用它们中的很多。特别是如果你将事件处理程序放在父节点上。这样你就可以毫无问题地处理 1000 个元素。(但不要使用 position:absolute)

图像 map

同样...如果没有太多元素，这很可能也是一个很好的解决方案...最简单...(绘制简单形状的最简单方法)。只要您拥有静态 MAP 值，您就可以转换你的图像大小重新计算 map 与比率..所以这不是问题。

---

如果元素不多，我会选择图像映射。

否则 SVG。

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

---

1. is that when the image changes I have to change the map coordinates too

如果您使用 div，则不必更改坐标？

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