HTML / JS检测图像上的区域

Question

在网络上（实际上是移动开发中的webview），我有一个篮球场的形象。我需要检测球场图像上区域的点击（触摸），无论是在3点线内还是在点线外。实现这一目标的最简单方法是什么？老派图像地图？ SVG？画布标签？

Answer 1

图像映射可能是最不复杂的实现。否则，您需要在球场上的任何位置订阅点击，然后检查相对于图像的鼠标坐标。

如果我是你，我会为自己省去为它编写客户端代码的痛苦，并且只使用图像映射。他们适合这样的事情。

http://www.w3schools.com/tags/tag_map.asp

Answer 2

使用Kinetic和Fabric等知名框架对<canvas>元素进行最简单的操作。

您可以在底层加载图像，然后在整个图像上应用3pt图层。在3pt层的顶部是呈弧形的2pt层。从上到下，分层看起来像这样：

- 2pt "arc" layer on either side  |
- 3pt "full court" layer          |  Click propagation
- court image                     V

所以当玩家触及2pt弧形层时，你知道它是2pt。当玩家在弧线外触摸时，它就是抓住触摸的3pt层。此外，框架可能允许传播到底层。你必须阻止那个。

Answer 3

当你不使用canvas时，你可以使用这个解决方案：Click image and get coordinates with Javascript (2006)

对于画布，也有一个解决方案：

1. How do I get the coordinates of a mouse click on a canvas element?
2. Getting mouse location in canvas

最简单的解决方案是获取库并使用它的功能......