Я визуализирую холст с большим количеством элементов. Из-за большого количества элементов и сложной формы элементов элементы отображаются не мгновенно, а с задержкой (иногда более 10 секунд). В это время все приложение зависает, и индикация загрузки не отображается. Можно ли как-то показать индикацию загрузки, когда холст еще не полностью отрисован?
Показывать индикацию загрузки при рисовании большого холста
comment
Я предполагаю, что это должно быть возможно, если вы экстернализуете вызовы отрисовки веб-работнику на закадровом холсте, а затем возвращаете его и отображаете визуализированное изображение на своем холсте. Поскольку работу выполняет веб-воркер, веб-страница не должна быть заблокирована, и вы можете отображать загрузчик во время процесса.
- person Angel schedule 15.07.2020
Ответы (1)
Это действительно зависит от самого приложения, рисунков и общей архитектуры вашего приложения.
Эта задача может быть очень сложной в некоторых ситуациях. Есть несколько вариантов:
1. Используйте веб-воркер
Это, наверное, лучший подход. Вам нужно запустить веб-воркер и сделать все рисунки на закадровом холсте. Будет просто, если вы сможете использовать нативный 2D API для всех чертежей. Если вы используете Konva, посмотрите здесь: https://konvajs.org/docs/sandbox/Web_Worker.html#page-title
Я не знаю никаких способов запустить приложение react-konva внутри веб-воркера.
2. Используйте поэтапное рисование
Вам нужно проверить, откуда берется медлительность. Из рендеринга? От создания слишком большого количества объектов? Если поток js тратит слишком много времени только на инициализацию узлов, вы можете создавать их поэтапно. Например, создать 100 узлов -> нарисовать холст -> немного подождать -> создать еще 100 узлов -> и т. д. Таким образом, рисунок будет медленно появляться на экране, и пользовательский интерфейс, вероятно, не будет зависать.
3. Оптимизация чертежей
Здесь есть много советов: https://konvajs.org/docs/performance/All_Performance_Tips.html#page-title
person
lavrton
schedule
17.07.2020
