javascript – 在Retina iPad上改进慢画布动画 – KineticJS

我正在使用KineticJS来执行HTML Canvas动画.动画可以在所有桌面浏览器和非视网膜iDevices(包括iPad mini)上完美运行.但是,从视网膜设备(浏览器或使用appcelerator的应用内网页视图),这些动画非常缓慢.我在视网膜显示屏上看过类似帆布动画的问题,但没有找到任何真正的解决方案.

我的舞台构造函数是1024w x 768h.
所有图像都是预装的.动画是使用预加载器的回调函数构造的.

如果我将舞台大小缩小一半(并相应地缩放内部内容),动画将几乎正常播放(仍然比其他ipad更小).我尝试这个的唯一理由是我很难理解视网膜显示是两个’点’/像素.

欢迎任何见解或想法.我的下一步尝试是开始更改图像分辨率,而不是动态缩放.

解决方法:

这是因为四个月前增加了一项功能. KineticJS将识别设备的像素比是否超过1,并尝试使其像pixelratio 1一样锐利.问题是,就像你已经发现的那样,它会将性能杀死到无用的程度.我们发现这是我们用例的情况.

我们的解决方案：我们在KineticJS中评论了像素比率部分,并将其硬编码为永远为1.

优点：

性能恢复正常

缺点：

图像并不那么尖锐

这是我们做出改变的部分：

Kinetic.Canvas = function(width, height, pixelRatio) {
// eduplus change to fix pixel ratio performance problems
this.pixelRatio = 1; //pixelRatio || _pixelRatio;

在与Eric讨论这个问题时,他发表评论来研究像素比率的表现,但我认为他还没有时间去做.希望这可以帮助！

标签：javascript,html5,canvas,retina-display,kineticjs
来源： https://codeday.me/bug/20190715/1468566.html