使用react-konva渲染数十万个圆圈

时间:2019-09-25 17:59:57

标签: canvas bigdata visualization react-konva

我正在与react-konva一起绘制大型的遗传数据集,对于konva和react-konva来说,我还是一个新手。易于使用的api对代码迭代非常有帮助。但是,我遇到了扩展问题,需要渲染成千上万的{{​​1}}`组件。目前,我只是映射数据集并返回一个圆或矩形,因为代码非常易于读取/编写。 konva是否在每种形状上都执行了draw()或是否已经批处理了绘图调用?有没有更好的方法,还是建议我改用香草画布或使用gl画布选项?

伪/缩写代码,说明我目前在下面做什么:

代码示例显示了我尝试过的内容。我已经使用<circle /> or来使其重量更轻一些。

<FastLayer />

结果加载缓慢,当我检查chrome dev-tools中的内存时,我看到每个Circle都是分开保存的。

1 个答案:

答案 0 :(得分:0)

如果您只想在页面上显示圆圈,则konvareact-konva<h2>I will display</h2> 是巨大的开销。数千种形状会占用大量内存。

最好直接使用canvas API(2d或webgl)。

或者可以考虑一些简化绘图的方法。例如,如果圆在屏幕上不可见,则不渲染圆。