在网络上(实际上是移动开发中的webview),我有一个篮球场的形象。我需要检测球场图像上区域的点击(触摸),无论是在3点线内还是在点线外。实现这一目标的最简单方法是什么?老派图像地图? SVG?画布标签?
答案 0 :(得分:1)
图像映射可能是最不复杂的实现。否则,您需要在球场上的任何位置订阅点击,然后检查相对于图像的鼠标坐标。
如果我是你,我会为自己省去为它编写客户端代码的痛苦,并且只使用图像映射。他们适合这样的事情。
答案 1 :(得分: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层。此外,框架可能允许传播到底层。你必须阻止那个。
答案 2 :(得分:0)
当你不使用canvas时,你可以使用这个解决方案:Click image and get coordinates with Javascript (2006)
对于画布,也有一个解决方案:
最简单的解决方案是获取库并使用它的功能......