2

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

4

3 回答 3

1

使用Kinetic和Fabric<canvas>等众所周知的框架在元素上最容易做到这一点。

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

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

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

于 2012-05-08T05:35:20.123 回答
1

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

如果我是你，我会省去为它编写客户端代码的痛苦，而只需使用图像映射。他们在这样的事情上工作得很好。

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

于 2012-05-08T02:40:24.250 回答
0

当您不使用画布时，您可以使用此解决方案：单击图像并使用 Javascript 获取坐标 (2006)

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

  1. 如何获取鼠标单击画布元素的坐标？
  2. 在画布中获取鼠标位置

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

于 2012-05-08T05:54:22.443 回答