Javascript 如何从画布中的巨大平面渲染和选择瓷砖？

我有一个需要帮助的情况。我有一个大平面，它被分成300k+的正方形瓷砖（有时还有贝塞尔曲线）。整个平面在屏幕上可见

如果我只画一次画布，渲染需要一点时间（在现代笔记本电脑中为1-2秒），但这是可行的。但是，我需要一种方法来选择某些瓷砖，方法是将鼠标悬停在瓷砖上，然后选择它们（通过拖放选择多个）。我有鼠标位置的逻辑，我可以通过重画场景和执行以下操作找到哪个瓷砖位于哪个位置：

if (!found && context.isPointInPath(mouseX, mouseY)) {
    context.fillStyle = 'rgb(255, 0, 0);'
    found = true; // for most scenarios, this stops the expensive operations that is isPointInPath.
} else {
    context.fillStyle = 'rgb(240, 240, 240);'
}

当我试图在300k+的磁贴空间中查找悬停的磁贴时，问题就出现了，因为查找鼠标所需的时间非常慢（3-4秒），而且滞后会给用户带来不好的体验

目前，我正在尝试创建一个树结构，其中树的非叶节点是较大的节点（例如，第一个节点将平面拆分为四个形状，下一个节点将较小的节点拆分为四个形状；有点像四叉树结构）。然而，当我有贝塞尔曲线时，我一直对如何将这棵树分割成这么多块感到困惑。我不能把树分成四个正方形，因为有些瓷砖会重叠。我的主要问题是如何处理分片在两个父节点之间重叠的边缘情况

---

或者一个更一般的问题。有没有比使用树路由更好的方法来处理这个问题？

我认为四叉树是最好的解决方案。也许可以给你一些想法。除了贝塞尔曲线部分（我们没有足够的信息），你不能用一个小正方形的宽度来划分

mouseX

，然后对y做同样的操作吗？这将是悬停正方形的列和行。