标签：javascript html5 canvas retina-display 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。