HTML/JS 检测图像上的区域

Question

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

Answer 1

这是在<canvas> 元素上使用Kinetic 和Fabric 等知名框架最简单的方法。

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

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

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

Answer 2

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

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

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

Answer 3

当你不使用画布时，你可以使用这个解决方案：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

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