绘制大图时显示加载指示 canvas
Show loading indication when drawing large canvas
我正在渲染一个包含很多元素的 canvas。由于元素数量多，元素形状复杂，元素不是即时显示的，而是有延迟显示的（有时会超过10秒）。在此期间，整个应用程序冻结并且不显示任何加载指示。是否可以在 canvas 尚未完全呈现时以某种方式显示加载指示？
实际上取决于应用程序本身、图纸和应用程序的总体架构。
在某些情况下，该任务可能非常复杂。有一些选项：
1。使用网络工作者
这可能是最好的方法。你需要 运行 一个 webworker 并且把所有的画都画到屏幕外 canvas。如果您可以对所有绘图使用 2d native API，那将很简单。如果您使用的是 Konva，请看这里：https://konvajs.org/docs/sandbox/Web_Worker.html#page-title
我不知道有什么方法可以运行 webworker 中的 react-konva 应用程序
2。使用增量绘图
您需要检查缓慢的原因。从渲染？从创建太多对象？如果 js 线程花费太多时间来初始化节点，您可以分步创建它们。比如创建 100 个节点 -> 绘制 canvas -> 稍等 -> 再创建 100 个节点 -> 等等。这样绘图会慢慢出现在屏幕上，并且 UI 可能不会被冻结。
3。优化图纸
这里有很多提示：https://konvajs.org/docs/performance/All_Performance_Tips.html#page-title
我正在渲染一个包含很多元素的 canvas。由于元素数量多，元素形状复杂，元素不是即时显示的，而是有延迟显示的（有时会超过10秒）。在此期间，整个应用程序冻结并且不显示任何加载指示。是否可以在 canvas 尚未完全呈现时以某种方式显示加载指示？
实际上取决于应用程序本身、图纸和应用程序的总体架构。
在某些情况下，该任务可能非常复杂。有一些选项：
1。使用网络工作者
这可能是最好的方法。你需要 运行 一个 webworker 并且把所有的画都画到屏幕外 canvas。如果您可以对所有绘图使用 2d native API，那将很简单。如果您使用的是 Konva，请看这里：https://konvajs.org/docs/sandbox/Web_Worker.html#page-title
我不知道有什么方法可以运行 webworker 中的 react-konva 应用程序
2。使用增量绘图
您需要检查缓慢的原因。从渲染？从创建太多对象？如果 js 线程花费太多时间来初始化节点，您可以分步创建它们。比如创建 100 个节点 -> 绘制 canvas -> 稍等 -> 再创建 100 个节点 -> 等等。这样绘图会慢慢出现在屏幕上，并且 UI 可能不会被冻结。
3。优化图纸
这里有很多提示：https://konvajs.org/docs/performance/All_Performance_Tips.html#page-title