5

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

在平移或缩放操作期间，画布变得无响应。似乎这种行为只在android设备上表现出来，因为在 IOS 上同样工作得非常好。我们还直接通过浏览器尝试了相同的应用程序，并注意到在 android 浏览器和 chrome 上存在类似的无响应行为。Firefox 比较敏感。

我们确实尝试了以下链接中提供的选项，但问题仍然存在（即多个画布层） 1) kineticjs 性能缓慢 2) HTML5 Canvas 在某些移动浏览器中的性能问题。

链接KineticJS - 使用 Stage.draggable 移动 4000 个图块中指定的方法， 如何在 dragstart 之前缓存整个图层并将其还原回 dragend？看起来很有希望，但我们可能无法做到这一点，因为我们的设计器将包含相当多的用户交互（如拖放绘图部分）。

我也确实在这里找到了另一个问题，引用了一个类似的问题https://stackoverflow.com/questions/18853952/kinectic-js-performance-on-android-4-1-devices-special-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 (安卓 4.3)。

4

1 回答 1

2

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

于 2013-10-25T15:34:31.837 回答