Вопрос по kineticjs, html5, retina-display, javascript, canvas – Улучшение медленной анимации холста на Retina iPad - KineticJS

3

Я использую KineticJS для выполнения анимации HTML Canvas. Анимации отлично работают во всех настольных браузерах и на устройствах iDevices (не включая iPad mini). Тем не менее, с устройства Retina (браузер или веб-просмотр в приложении с помощью appcelerator) эти анимации очень вялые. Я видел похожие проблемы с анимацией холста на сетчатке, но не нашел ни одного истинного решения.

Мой конструктор сцены - 1024х768. Все изображения предварительно загружены. А анимации создаются с использованием preloader'афункция обратного вызова.

Если я уменьшу размер своей сцены наполовину (и соответствующим образом масштабирую внутреннее содержимое), анимация будет воспроизводиться почти нормально (все еще немного прерывистее, чем другие ipads). Моим единственным оправданием для попытки было это очень плохое понимание, что сетчатка показывает два "точки'/ Пиксель.

Любое понимание или идеи приветствуются. Моя следующая попытка - начать изменение разрешения изображения, а не динамическое масштабирование.

Ваш Ответ

3   ответа
1

чтобы перегрузить 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);
}
8

добавленной четыре месяца назад. KineticJS распознает, если пиксель устройства превышает 1, и попытается сделать его таким же резким, как с pixelratio 1. Проблема, как вы выяснили, в том, что он убивает производительность до такой степени, чтобесполезно. Мы обнаружили, что это относится к нашим случаям использования.

Наше решение: мы закомментировали часть соотношения пикселей в KineticJS и жестко закодировали его, чтобы он всегда был единым.

Плюсы:

Производительность возвращается к нормальной

Минусы:

Изображение не такое резкое

Это та часть, где мы внесли изменения:

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

Обсуждая это с Эриком, он сделал комментарии, чтобы исследовать производительность в соотношении пикселей, но я неЯ думаю, у него было время, чтобы сделать это еще. Надеюсь это поможет!

удивительно конкретный ответ SoluableNonagon
Это также помогло мне с падением моего веб-приложения на Retina iPad. aarreoskari
Вот это да. Огромное спасибо. Спасатель kbeau29
3

когда именно этот глобальный параметр был введен), самый простой и наименее навязчивый способ сделать это - установить Kinetic.pixelRation в желаемое значение перед созданием вашей сцены:

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

Похожие вопросы