改进Retina iPad上的慢动画画布动画 - KineticJS [英] Improving slow canvas animation on Retina iPad - KineticJS

问题描述

我使用KineticJS来执行HTML Canvas动画。动画在所有桌面浏览器和非retina iDevices（包括iPad mini）上完美工作。然而，从视网膜设备（浏览器或应用程序中的webview使用appcelerator）这些动画非常缓慢。我已经看到类似的问题与视网膜显示画布动画，但没有找到任何真正的解决方案。

I am using KineticJS to perform HTML Canvas animations. Animations work perfectly on all desktop browsers, and non retina iDevices (including iPad mini). However, from a retina device (browser or in-app webview using appcelerator) these animations are very sluggish. I have seen similar issues with canvas animations on retina display, but have not found any true solution.

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

My Stage constructor is 1024w x 768h. All images are preloaded. And animations are constructed using the preloader's callback function.

如果我把我的舞台大小减少一半（并相应地缩放内容），动画将播放几乎正常（仍然比其他ipad小一点）。我唯一的理由是，我很难理解，视网膜显示是两个点/像素。

If I reduce my stage size by half (and scale inner contents accordingly), the animation will play almost normally (still a little choppier than other ipads). My only justification for trying this was my very poor understanding that a retina display is two 'points'/pixel.

欢迎任何洞察或想法。我的下一个尝试是开始更改图像分辨率，而不是动态缩放。

Any insight or ideas are welcome. My next attempt is to start changing image resolutions, rather than scaling dynamically.

推荐答案

这是由于四个月前添加的功能。 KineticJS将识别设备的像素比是否超过1，并尝试使其像像素比1那样清晰。问题是，像你已经发现的，它杀死了性能，它的无用的点。我们已经发现这是我们的用例的情况。

This is due to a feature added four months ago. KineticJS will recognize if the pixelratio of the device is over 1 and try to make it as sharp as with pixelratio 1. The problem is, like you have found out, that it kills the performance to the point that it's useless. We have found this to be the case for our use cases.

我们的解决方案：我们注释掉KineticJS中的像素比例部分，硬编码它总是一个。

Our solution: We commented out the pixel ratio part in KineticJS and hard coded it to always be one.

优点：

效果会恢复正常

缺点：

图像不清晰

这是我们更改：

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

当与Eric讨论这个问题时，他评论了像素比的性能，他已经有时间这样做了。希望这有助于！

When discussing this with Eric, he made comments to investigate pixel ratio performance, but I don't think he has had the time to do that yet. Hope this helps!

这篇关于改进Retina iPad上的慢动画画布动画 - KineticJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！