可能有人在这个困境上有过类似的经历，可以帮助我走出困境......

基本上，我有一个 Canvas 元素，我使用

context.fillRect (x, y, width, height)

现在，我希望一些矩形成为热点并响应点击事件。我可以使用 event.layerX 和 event.layerY 找出点击事件的确切 (x,y)。

鉴于我知道以下内容:

• 点击的确切 x,y
• 每个矩形的x、y、宽度和高度

我如何确定点击事件是否发生在某个矩形的周边内？
并且，
点击事件发生在哪个矩形0n？

有类似的数学公式吗？

任何帮助将不胜感激，如果我不够清楚，请告诉我......

谢谢

编辑
没有比遍历所有矩形并检查它们的位置和尺寸更好的方法了吗？

最佳答案

这是使用 map 时经常遇到的一般拓扑问题。

判断一个点是否在任何多边形(矩形、圆形、不规则形状)内的算法如下:

• 从被检查的点开始在任何方向构造任何线，直到您的多边形所在的屏幕区域的边缘

• 如果该线在奇数 处与任何多边形边界相交，则它在该多边形内

• 如果该线与任何多边形边界相交 偶数 个位置，则它在该多边形外部。

         ------------
         |           |
         |        o--|-------------------    1 intersection: inside
         |           |
         -------------
         ------------
         |           |
  o------|-----------|-------------------    2 intersections: outside
         |           |
         -------------
  

注意事项:

• 线的方向无关

• 如果多边形在屏幕的一侧被切割而没有关闭，则将不起作用

• 如果多边形与自身相切，则如果线 恰好通过切割点(例如，在图 8 中被视为 直线恰好穿过上下位置的单个多边形 图中的部分连接)

关于javascript - HTML5 Canvas : find out if click co-ordinates are inside a given rectangle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3173448/