改进 Retina iPad 上的慢画布动画 - KineticJS

Posted

技术标签:

【中文标题】改进 Retina iPad 上的慢画布动画 - KineticJS【英文标题】:Improving slow canvas animation on Retina iPad - KineticJS 【发布时间】:2013-03-23 02:43:30 【问题描述】:

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

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

如果我将我的舞台大小减半(并相应地缩放内部内容),动画将几乎正常播放(仍然比其他 ipad 有点断断续续)。我尝试这样做的唯一理由是我非常不理解视网膜显示器是两个“点”/像素。

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

【问题讨论】:

【参考方案1】:

使用 KineticJS 5 或更高版本(我不确定何时引入此全局设置),最简单且干扰最小的方法是在实例化您的舞台之前将 Kinetic.pixelRatio 设置为您想要的值:

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

【讨论】:

【参考方案2】:

我在实例化我的 Stage 之前使用它来重载 pixelRatio 而不修改 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);

【讨论】:

【参考方案3】:

这是由于四个月前添加的一项功能。 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 讨论这个问题时,他让 cmets 来研究像素比性能,但我认为他还没有时间这样做。希望这会有所帮助!

【讨论】:

哇。太感谢了。救生员。 这似乎也有助于我的网络应用程序在 Retina iPad 上崩溃。

以上是关于改进 Retina iPad 上的慢画布动画 - KineticJS的主要内容,如果未能解决你的问题,请参考以下文章

在 Retina 显示屏上的 CGContextRef 上绘画

CATiledLayer PDF 在 iPad 3 Retina 显示屏上的性能很差

在 Xcode 6 上的 iPad Mini Retina 上运行应用程序

Jquery 缓动动画在 iPad 上滞后

iPhone/iPad 和 iPhone(Retina)/iPad(Retina) 中图像的理想分辨率

使用 Retina 显示屏在画布上绘制图像