android - 使用 HTML5 Canvas 和 KineticJS 在 Android Webview 上平移、缩放性能不佳

Question

我们的移动网络应用程序包括一个交互式设计器，我们使用 HTML5 canvas 和 Kinetic.js 实现了它。我们正在尝试将大约 353 对象动态渲染到 Canvas 上，其中 178 个是文本，其余是线条和矩形。

在平移或缩放操作期间， Canvas 变得无响应。似乎此行为仅在 android 设备上出现，因为在 IOS 上效果非常好。我们还直接通过浏览器尝试了相同的应用程序，并注意到在安卓浏览器和 chrome 上出现了类似的无响应行为。 Firefox 相对灵敏。

我们确实尝试了以下链接中提供的选项，但问题仍然存在(即多个 Canvas 层)1) Performance slow with kineticjs2) Performance problems with HTML5 Canvas in some mobile browsers.

链接中指定的方法 KineticJS - Moving 4000 tiles with Stage.draggable , How to cache a whole layer right before dragstart and revert it back on dragend?看起来很有希望，但我们可能无法做到这一点，因为我们的设计器将包含相当多的用户交互(如拖放绘图部分)。

我也确实在这里找到了另一个引用类似问题的问题 https://stackoverflow.com/questions/18853952/kinectic-js-performance-on-android-4-1-devices-especially-pan-and-zoom-is-unre

是否有任何其他可能的解决方案/修复来提高此性能，请提供帮助。

编辑:我们在以下设备上测试了我们的应用程序 1) Samsung Note 800 (Android 4.1.2) 2) Samsung Tab 2 (Android 4.1.2) 3) ASUS Transformer Pad TF300TG (Android 4.2.1) 和 4) Nexus 7 (Android 4.3)。

Answer 1

您肯定需要在拖放之前立即将舞台缓存为图像，因为如果您尝试在 Canvas 中非常快速地渲染数百个文本元素(原生 Canvas 或 KineticJS)，性能会很慢，尤其是在 Android 上。在拖动结束时，您可以使用 destroy() 销毁缓存的图像。