2

作为一个爱好项目,我正在尝试创建一个基于 64 * 64 瓦片的地图原型,该地图可以以高性能的方式拖动。如果可行,我想将其扩展到 1024 x 1024 瓷砖。

当前方法
包含所有“平铺”div 的“地图”div。使用这个 jquery 插件,我使地图 div 可拖动。平铺 div 具有 css sprite 背景,因此只需一次调用 img。这适用于一些瓷砖,但随着更多瓷砖变得非常慢。

我试图
通过将它们放在包装器 div 中来规避所有这些瓷砖的 dom 回流,希望它可以在单独的图层中呈现,然后可以作为一个图层移动。没用。
尝试将地图 div 的父 div 溢出设置为隐藏,这样就不会渲染冗余图块。没用。
尝试删除对 j​​query 的依赖并自己进行可拖动的实现。工作同样糟糕。所以没用。
将背景图像切换为背景颜色不会提高性能,所以这不是问题。

我还不知道如何实施
的想法 如何确保瓷砖不会触发回流?
将看不见的瓷砖设置为不可见?我可以通过一些努力来实现这一点,但不知道这是否会提高性能。

有什么建议么?

4

1 回答 1

1

将这组图块渲染到一个 CANVAS 元素,导出为 PNG,然后在拖动时移动它。

于 2012-12-27T11:55:45.287 回答