Animation 在画布上看不到精灵,甚至看不到带动能的矩形?
我正在使用requirejs加载Kinetic,我有一个简单的脚本来创建一个精灵并将其加载到画布上。它以一帧的默认空闲状态加载精灵:Animation 在画布上看不到精灵,甚至看不到带动能的矩形?,animation,canvas,sprite,requirejs,kineticjs,Animation,Canvas,Sprite,Requirejs,Kineticjs,我正在使用requirejs加载Kinetic,我有一个简单的脚本来创建一个精灵并将其加载到画布上。它以一帧的默认空闲状态加载精灵: require(['libraries/kinetic'], function(Kinetic){ console.log('Initializing....'); var stage = new Kinetic.Stage({ container : 'canvas', width : 578, height
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
我正在为require使用垫片配置,以便正确加载动能:
requirejs.config({
baseUrl: '/assets/js',
shim: {
'libraries/kinetic' : {
exports : 'Kinetic'
},
}
});
无论我尝试什么,我都无法让精灵/图像显示出来!任何帮助都将不胜感激
我使用谷歌的这张图片作为测试精灵:
http://www.nes-snes-sprites.com/ImagesSheet/SuperDoubleDragonSheet2.gif
最终使用domeReady requirejs模块,并按照以下方式加载:
require(['libraries/require/domReady!',
'libraries/kinetic'], function(document, Kinetic){... etc
似乎当我将代码从require定义中取出,并将其放在一个平面html页面上时,它就工作了。不确定到底是什么打破了它?