使用HTML5 Canvas和KineticJS在Android Webview上实现糟糕的Pan,Scale性能

Question

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

在平移或缩放操作期间,画布变得无响应.看来这种行为仅在Android设备上展示,因为它在IOS上的效果非常好.我们也通过浏览器直接尝试了相同的应用程序,并注意到Android浏览器和chrome上类似的无响应行为.Firefox相对敏感.

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

链接KineticJS中指定的方法- 使用Stage.draggable移动4000个图块, 如何在dragstart之前缓存整个图层并将其恢复为dragend？似乎很有希望,但我们可能无法使用它,因为我们的设计师将包含相当多的用户交互(如拖放绘图部分).

我也在这里找到了另一个问题,引用了类似的问题/sf/ask/1319776671/ECIF-pan-and-zoom-is-unre

是否有任何其他可能的解决方案/修复程序来改善此性能,请帮助.

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

Answer 1

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