绘制大画布时显示加载指示答案

【问题标题】：Show loading indication when drawing large canvas绘制大画布时显示加载指示
【发布时间】：2020-07-15 12:03:23
【问题描述】：

我正在渲染一个包含很多元素的画布。由于元素数量多且元素形状复杂，这些元素不会立即显示，而是延迟显示（有时超过 10 秒）。在此期间，整个应用程序冻结并且不显示加载指示。是否有可能在画布尚未完全渲染时以某种方式显示加载指示？

【问题讨论】：

我想如果您将绘图调用外部化到屏幕外画布上的网络工作者，然后将其取回并在画布上显示渲染图像，应该是可能的。由于它是一个网络工作者在做这项工作，因此不应阻止该网页，您可以在此过程中显示一个加载器。

【解决方案1】：

实际上取决于应用本身、绘图和应用的总体架构。

在某些情况下，该任务可能非常复杂。有一些选择：

1。使用网络工作者

这可能是最好的方法。您需要运行 webworker 并将所有绘图制作成屏幕外画布。如果您可以对所有绘图使用 2d 本机 API，那将很简单。如果您使用的是 Konva，请看这里：https://konvajs.org/docs/sandbox/Web_Worker.html#page-title

我不知道在 webworker 中运行 react-konva 应用程序的任何方法

您需要检查缓慢的来源。从渲染？从创建太多对象？如果 js 线程花费太多时间来初始化节点，您可以分步创建它们。比如创建 100 个节点 -> 绘制画布 -> 稍等 -> 再创建 100 个节点 -> 等等。这样绘图会慢慢出现在屏幕上，并且 UI 可能不会被冻结。

【讨论】：