确定一个点在2d空间中的哪个矩形

Question

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

我希望能够使用鼠标跟踪与此图像进行交互（我不能使用SVG，因为它不能扩展到10-100k矩形）。有没有任何数据结构/算法，给定鼠标x，y坐标能够告诉你鼠标在哪个框（使用矩形的计算位置）？我在想像k-d树，但不确定。

Answer 1

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

由于数据是在y中构建的，因此您应该能够根据O(1)时间内的偏移来计算点所在的矩形“条带”。

如果您按照排序顺序存储每个'条带'中的各个矩形（使用xmax说），那么您应该能够使用二进制搜索在O(log(n))中找到条带内的特定矩形）。

希望这有帮助。

Answer 2

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

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

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

Answer 3

R-tree适合提供此类空间访问

但有些问题：

您的矩形是静态还是动态？

您对矩形集有多少点查询？

修改：

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

制作与主图片尺寸相同的附加位图。绘制具有相同坐标的每个矩形，但用唯一颜色填充它（例如，color =矩形索引）。然后检查鼠标点下的颜色=＆gt;在O（1）

中获取矩形索引