javascript - HTML/JS 检测图像上的区域

Question

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

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。当球员在弧线外触球时，三分层会接住触球。此外，框架可能允许传播到底层。你必须阻止这种情况的发生。