1

我正在使用 react-konva 渲染大型遗传数据集，而且我对 konva 和 react-konva 都很陌生。它易于使用的 api 对代码迭代非常有帮助。但是，我遇到了渲染数万/数十万个<circle /> or组件的缩放问题。目前，我只是映射数据集并返回一个圆圈或矩形，因为代码很容易读/写。konva 是在每个形状上执行 draw() 还是已经批处理了绘制调用？有没有更好的方法，还是建议我改用香草画布或查看 gl 画布选项？

伪/缩写代码说明了我目前在下面做的事情：

代码示例显示了我尝试过的内容。我曾经<FastLayer />尝试让它更轻一些。

import React from 'react';
import { Stage, FastLayer, Circle } from 'react-konva'; 

const RADIUS = 2;

const getLargeDataset = (width, height) => Array.from({ length: 100000 }).map((_, i) => ({
    x: Math.random() * width,
    y: Math.random() * height
}));

function CirclePlot({ width, height }) {
    const largeDataset = getLargeDataset(width, height);

    return (
        <Stage
            height={height}
            width={width}
        >
            <FastLayer>
                {largeDataset.map(({ x, y }, i) => (
                    <Circle
                        key={`circle:${i}`}
                        x={x}
                        y={y}
                        radius={RADIUS}
                    />
                ))}
            </FastLayer>
        </Stage>
    );
}

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

4

1 回答 1

0

如果您只想在页面上显示圆圈，那么react和konva是react-konva巨大的开销。它会为数千个形状消耗大量内存。

直接使用画布 API（2d 或 webgl）会更好。

或者可以考虑一些方法来简化绘图。例如，不要渲染圆圈，如果它们在屏幕上不可见。

于 2019-12-27T13:35:27.870 回答