使用Kinetic无法看到精灵或画布？

我正在使用requirejs加载Kinetic，我有一个简单的脚本来创建一个精灵并将其加载到画布上。它加载的雪碧是一个框架默认闲置状态：使用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' 
     }, 
    } 
});

无论我怎么努力，我无法让精灵/图像显示出来！任何帮助将不胜感激！

我使用的是从谷歌这一形象作为测试精灵：

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

来源

2012-12-09 mlebrun15

似乎当我需要像该代码脱离了require定义，并将其放在一个平坦的html页面上。不确定究竟是什么打破了它？ – mlebrun15

结束了使用的domeReady requirejs模块，并加载它按照下文：

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

来源

2012-12-12 04:34:18 mlebrun15

使用Kinetic无法看到精灵或画布？

回答

相关问题