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

Posted 2023-03-24

【中文标题】使用 HTML5 Canvas 和 KineticJS 在 Android Webview 上平移、缩放性能不佳

【英文标题】：Poor Pan, Scale performance on Android Webview using HTML5 Canvas and KineticJS

【发布时间】：2013-09-30 13:13:18

【问题描述】：

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

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

我们确实尝试了以下链接中提供的选项，但问题仍然存在（即多个画布层） 1)Performance slow with kineticjs 2)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://***.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)。

【问题讨论】：

您好，您的问题解决了吗？我什至还有一个 KineticJS + Android WebView 的问题 => 在 ASUS TF300TG 上绘图时由于某种原因出现了一些故障。不在 Nexus 7 上。未在其他设备上测试。

没有 Sochka，我还没有找到解决方案。我也尝试过通过普通的 canvas javascript api 渲染对象，令人惊讶的是它在 chrome 和 firefox 上运行良好。 webview 上的性能仅略有提高。我尝试了预渲染（没有动力学），但是在缩放超过一定程度时，文本和线条开始像素化。仍在努力寻找解决方案:(

可能对某人有帮助：github.com/lavrton/kineticjs-tips-and-tools#performance 有几个性能提示。还包括 android 提示。

【参考方案1】：

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

【讨论】：

当然埃里克会试试这个。我们最初尝试过对图像进行预渲染，但由于超出某个点的缩放会导致文本和线条模糊（由于插值），因此不再对此进行研究。我确实找到了一些关于防止插值的链接 - 将进一步研究。