Javascript 改进视网膜iPad上的慢速画布动画-KineticJS

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

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

如果我将舞台尺寸缩小一半（并相应缩放内部内容），动画将几乎正常播放（仍然比其他iPad稍有起伏）。我尝试这种方法的唯一理由是我对视网膜显示是两个“点/像素”的理解很差

---

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

这是因为四个月前增加了一项功能。KineticJS将识别设备的像素比率是否超过1，并尝试使其与像素比率1一样清晰。问题是，正如您所发现的，它会破坏性能，以至于毫无用处。我们发现对于我们的用例来说就是这样

我们的解决方案：我们注释掉了KineticJS中的像素比率部分，并将其硬编码为始终为1

优点：

性能恢复正常

缺点：

图像不是那么清晰

这是我们进行更改的部分：

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

---

在与Eric讨论这一点时，他发表了一些评论来调查像素比率性能，但我认为他还没有时间这么做。希望这有帮助

我在实例化我的Stage之前使用它来重载pixelRatio，而不修改KineticJS的源文件。（无需在任何更新后更新源文件。）

咖啡脚本：

# Adjust device pixel ratio
for className in ["HitCanvas", "SceneCanvas", "Canvas"]
    Kinetic[className].prototype.init = ((p_method) -> (p_config={}) ->
        p_config.pixelRatio = 1
        p_method.call @, p_config
    ) Kinetic[className].prototype.init

JavaScript:

_ref = ["HitCanvas", "SceneCanvas", "Canvas"];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  className = _ref[_i];
  Kinetic[className].prototype.init = (function(p_method) {
    return function(p_config) {
      if (p_config == null) {
        p_config = {};
      }
      p_config.pixelRatio = 1;
      return p_method.call(this, p_config);
    };
  })(Kinetic[className].prototype.init);
}

\u ref=[“HitCanvas”、“SceneCanvas”、“Canvas”]；
对于（_i=0，_len=_ref.length；_i<_len；_i++）{
类名=_ref[_i]；
动力学[className].prototype.init=（函数（p_方法）{
返回函数（p_配置）{
如果（p_config==null）{
p_config={}；
}
p_config.pixelRatio=1；
返回p_method.call（这是p_配置）；
};
})（动力学[className].prototype.init）；
}

使用KineticJS 5或更高版本（我不确定这一全局设置是什么时候引入的），最简单、侵入性最小的方法是在实例化阶段之前将Kinetic.pixelation设置为所需的值：

Kinetic.pixelRatio = 1;
var stage = new Kinetic.Stage({
    ...
});

---

哇！非常感谢你。这似乎也有助于我的网络应用程序在iPad上崩溃。