Question

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

如果我只绘制一次画布，则渲染会花费一些时间（在现代笔记本电脑中为1-2s），但它是可行的。但是，我需要一种方法来选择某些图块，方法是将它们悬停在它们上方，然后选择它们（通过拖放操作多个）。我具有将鼠标放置在适当位置的逻辑，并且可以通过重绘场景并执行以下操作来找到哪个图块位于哪个位置：

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秒），并且滞后会带来糟糕的用户体验。

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

或更一般的问题。有没有比树路线更好的方法来解决此问题？

如何从“画布”中的巨大平面渲染和选择图块？

0 个答案: