改善Retina iPad上缓慢的画布动画 - KineticJS

Question

我正在使用KineticJS进行HTML Canvas动画。在所有桌面浏览器和非Retina iDevices（包括iPad mini）上，动画都能完美运行。然而，在Retina设备上（使用appcelerator中的浏览器或应用内webview），这些动画会变得非常卡顿。我曾经遇到过类似的问题，但是没有找到真正的解决方案。

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

如果我将舞台大小缩小一半（并相应地缩放内部内容），则动画将几乎正常播放（仍然比其他iPad略微卡顿）。我尝试这样做的唯一理由是我对Retina显示屏是两个'点'/像素的非常不了解。

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

- kbeau29

Answer 1

这是由于四个月前添加的一个功能。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讨论此事时，他提到要调查像素比性能，但我认为他还没有时间去做。希望这能帮到你！

- pillar15

---

哇，非常感谢。救命稻草。 - kbeau29

这似乎也有助于我解决我的 Web 应用在 Retina iPad 上崩溃的问题。 - aarreoskari

Answer 2

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

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

- NilsCodes

Answer 3

在实例化Stage之前，我使用这个方法来重载像素比，而不需要修改KineticJS源代码文件。（这样就可以避免在更新后必须更新源代码文件的麻烦。）

https://gist.github.com/echong/6107722

CoffeeScript：

# 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);
}

- Elliot Chong