我正在使用 KineticJS 执行 HTML Canvas 动画。动画可以在所有桌面浏览器和非视网膜 iDevices(包括 iPad mini)上完美运行。但是,从视网膜设备(浏览器或使用 appcelerator 的应用内 Web 视图)来看,这些动画非常缓慢。我在视网膜显示屏上看到过画布动画的类似问题,但尚未找到任何真正的解决方案。
我的舞台构造函数为 1024w x 768h。
所有图像均已预加载。动画是使用预加载器的回调函数构建的。
如果我将舞台大小减少一半(并相应地缩放内部内容),动画将几乎正常播放(仍然比其他 ipad 稍微不稳定)。我尝试这个的唯一理由是我对视网膜显示器是两个“点”/像素的理解很差。
欢迎任何见解或想法。我的下一个尝试是开始改变图像分辨率,而不是动态缩放。
这是由于四个月前添加的一项功能。 KineticJS 将识别设备的像素比是否超过 1,并尝试使其与像素比 1 一样清晰。问题是,正如您所发现的,它会降低性能,使其变得毫无用处。我们发现我们的用例就是这种情况。
我们的解决方案:我们注释掉 KineticJS 中的像素比部分,并将其硬编码为始终为 1。
Pros:
性能恢复正常
Cons:
图像不那么清晰
这是我们进行更改的部分:
Kinetic.Canvas = function(width, height, pixelRatio) {
// eduplus change to fix pixel ratio performance problems
this.pixelRatio = 1; //pixelRatio || _pixelRatio;
当与 Eric 讨论这个问题时,他发表了评论以调查像素比性能,但我认为他还没有时间这样做。希望这可以帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)