HTML / JS检测图像上的区域

时间:2012-05-08 01:40:11

标签: javascript html5 canvas detection imagemap

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

3 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:1)

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

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

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

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

答案 2 :(得分:0)

当你不使用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
  3. 最简单的解决方案是获取库并使用它的功能......