У меня есть ситуация, с которой мне нужна помощь. У меня есть одна большая плоскость, которая разделена на 300к + квадратные плитки (а иногда и кривые Безье). Вся плоскость видна на экране.
Если я рисую холст только один раз, рендеринг занимает немного времени (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 секунды), и задержка дает плохой пользовательский опыт.
В настоящее время я занимаюсь созданием древовидной структуры, в которой неконечные узлы дерева являются узлами большего размера (например, первый узел разбивает плоскость на четыре фигуры, а следующий разбивает меньшие на четыре фигуры; как структура Quadtree). Тем не менее, я не понял, как разбить это дерево на множество частей, когда у меня кривые Безье. Я не могу просто разделить дерево на четыре квадрата, потому что некоторые плитки будут перекрываться. Мой главный вопрос - как обрабатывать те крайние случаи, когда тайлы перекрываются между двумя родительскими узлами.
Или немного более общий вопрос. Есть ли лучший способ справиться с этой проблемой, чем использовать древовидный маршрут?