Konva不良性能900路径

Question

我试着用Konva创建一个可滚动和可缩放的kanvas。我只移动这一层，而不是舞台，因为在舞台上我想要一个固定的层，它住在一些地方。此外，我还实现了一些滚动和缩放边界，动画返回到允许的值。一切都很好，只是当我加载900条路径(都是缓存的)之后，它就会变得非常滞后。当用4-5测试的时候，一切都很好。

我创建了一个代码框来查看这个问题。

这有什么问题吗？根据我的理解，缓存应该从路径创建一个图像，当我克隆路径时，我应该只复制图像？那它为什么表现这么差呢？

https://codesandbox.io/s/mystifying-pine-r1395z?file=/src/index.js

Answer 1

如果运行分析器，您将看到什么是慢的：

​

​

这不是渲染。这是阻力限制的计算。优化这些计算。调用path.getClientRect()是一项昂贵的操作。尤其是对于一条有很多点的道路。缓存你的计算。我更新了演示程序，只调用每个对象一个函数：https://codesandbox.io/s/romantic-cerf-yq0tgy?file=/src/index.js。但你可以更进一步。先计算一次。然后使用计算出的大小。