处理超过1500个div用于缩放和拖动?

时间:2013-08-12 09:31:46

标签: jquery html animation web svg

我正在尝试制作一个小应用程序来绘制一个带有svg图形的花园,我可以拖动和平移。 这是一个演示:http://pmtesting1.meteor.com/(点击进行拖动和滚动以进行缩放) 该演示显示了一个大的svg元素,其中包含大约1400个节点。

也许有更好的解决方案? 或者一些提示会很好!

唯一的事情是:植物应该是svg图像。

感谢您的帮助和帮助!

我尝试过:将每株植物放入一个svg和group中,这有点帮助但它仍然滞后。 我试图制作很多svg元素,这是一场灾难。

1 个答案:

答案 0 :(得分:0)

你应该只加载/绘制当前在视图中的元素,因此将被渲染。如果你设法只传递那些元素,你可以(理论上)拥有无限的元素..

如果你真的想深入调整性能,我建议使用四叉树,但对于一个简单的应用来说,这可能有点太多了。

也许链接:how many stacked canvas elements is too much有助于全面了解画布性能。

编辑:如何做到这一点:

  • 列出元素列表,包括其位置。比较每个位置,当它在屏幕上时,显示它,否则隐藏它。这将是一个缓慢的变种。
  • 您还可以在一个块中打包一堆彼此接近的元素,并仅比较块。这将更快(比较,而不是渲染)
  • 使用四叉树/双树并进行截头剔除。这需要在javascript中进行大量工作,但可能是最快的解决方案。

我很确定有最适合你的api。