Javascript 有效地确定点在二维空间中的矩形

我有一大组在html5画布上绘制的矩形

---

我希望能够使用鼠标跟踪与此图像交互（我不能使用SVG，因为它不能缩放到10-100k矩形）。在给定鼠标x，y坐标的情况下，是否有任何数据结构/算法能够告诉您鼠标在哪个框上（使用矩形的计算位置）？我在想类似k-d树的东西，但不确定

如果您的数据总是以所示的形式显示，我认为您应该能够比空间树数据结构做得更好

由于数据是在

y

中构造的，因此您应该能够根据

O（1）

时间中的偏移量计算点所处的矩形“条带”

如果您以排序顺序（使用

xmax

say）将各个矩形存储在每个“条带”中，那么您应该能够使用二进制搜索（在

O（log（n））

中）定位条带中的特定矩形

---

希望这能有所帮助。

最简单的解决方案是迭代所有矩形，并检查您是否在其中。检查单个矩形很容易（如果你愿意，我会明确地写下来）

如果您有许多矩形，并且关心性能，那么可以通过将矩形放在一个查找速度更快的数据结构中来轻松加快速度。查看您发送的图像，数据的一个明显特性是垂直位置（“行”）数量有限。这意味着，如果您检查所在的行，则只需要检查该行中的矩形。最后，要选择行上或行内的行选择矩形，请保留已排序的数据结构（例如，某些搜索树）

因此，您的数据结构可能类似于行的搜索树，其中每个节点沿行保留一个矩形搜索树。

适合提供此类空间访问

但有一些问题：

您的矩形设置为静态还是动态

您希望矩形集有多少个点查询

编辑：

因为矩形集是静态的： 有一种方法，在传统的位图图形中使用（不知道它是否适用于html5画布）：

---

制作与主图片大小相同的附加位图。用相同的坐标绘制每个矩形，但用唯一的颜色填充（例如，颜色=矩形索引）。然后选中鼠标点下方的颜色=>在O（1）中获取矩形索引

矩形将是静态的，因为不会添加新的矩形。可能有很多问题，这真的很聪明。我去看看。“编码”图像是透明的还是需要可见的？它是不可见的，某种形式的缓冲区。只需在主窗口使用鼠标坐标，就可以看到这张不可见的图片。你能详细说明一下如何获得颜色吗？您将使用什么命令？您可以使用获取画布图像中像素的颜色。然后将颜色组合成一个十六进制字符串，可用于查找相应的对象。