Не можете увидеть спрайт или даже прямоугольник на холсте с помощью Kinetic?

Я использую requirejs для загрузки в Kinetic, и у меня есть простой скрипт для создания спрайта и загрузки его на холст. Он загружает спрайт в состоянии ожидания по умолчанию, которое составляет один кадр:

require(['libraries/kinetic'], function(Kinetic){

  console.log('Initializing....');

  var stage  = new Kinetic.Stage({
    container : 'canvas',
    width     : 578,
    height    : 200
  }),
  layer      = new Kinetic.Layer(),
  animations = {
    idleRight: [{
      x      : 343,
      y      : 2,
      width  : 26,
      height : 58
    }]
  },
  imageObj     = new Image();
  imageObj.src = '/assets/images/billy.png';

  imageObj.onload = function() {

    var billy = new Kinetic.Sprite({
      x          : 25,
      y          : 25,
      image      : imageObj,
      animation  : 'idleRight',
      animations : animations,
      frameRate  : 7
    });

    // add the shape to the layer
    layer.add(billy);

    // add the layer to the stage
    stage.add(layer);

    // start sprite animation
    billy.start();

    console.log('Done.');

  }; // .onload

}); // require

Я использую конфигурацию прокладки для требования, чтобы кинетика загружалась правильно:

requirejs.config({
    baseUrl: '/assets/js',
    shim: {
        'libraries/kinetic' : {
          exports : 'Kinetic'
        },
    }
});

Что бы я ни пытался, я не могу заставить спрайт/изображение появиться! Любая помощь будет принята с благодарностью!

Я использую это изображение из Google в качестве тестового спрайта:

http://www.nes-snes-sprites.com/ImagesSheet/SuperDoubleDragonSheet2.gif

person mlebrun15    schedule 09.12.2012    source источник
comment
похоже, когда я беру код из определения требования и помещаю его на плоскую html-страницу, он работает. не уверен, что именно ломается?   -  person mlebrun15    schedule 09.12.2012


Ответы (1)


В итоге мы использовали модуль requirejs domeReady и загрузили его, как показано ниже:

require(['libraries/require/domReady!',
        'libraries/kinetic'], function(document, Kinetic){... etc
person mlebrun15    schedule 12.12.2012