抱歉这可能是一个非常愚蠢的问题，但我正在尝试学习如何使用 KineticJS 并尝试修改教程（http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/）以使用静态图像而不是形状。对于它的价值，我正在尝试为格伦贝克的头部制作 PNG 动画以使其旋转（这里和那里都没有）。
到目前为止，我已经搞砸了一堆错误，但我一直被“未捕获的 TypeError：Object# has no method 'onFrame'”所困扰
我已经在 SO 和其他网站上阅读了有关对象/方法的多个问题，虽然我认为我理解问题所在，但我不确定如何解决它：
据我了解，“无方法”错误意味着没有可调用的函数..？当然，“onFrame”存在于 Kinetic 内部，但..？我尝试查看 Kinetic 文档，看看他们是否在 3.8.X（教程）和 4.X（我正在使用的库）之间更改了名称，但看起来并没有。
这是我的代码：
<head>
<script src="http://test.XXXXX.com/js/kinetic-v4.3.2.js"></script>
<script>
function animate(animatedLayer, beck, frame){
var canvas = animatedLayer.getCanvas();
var context = animatedLayer.getContext();
// update
var angularFriction = 0.2;
var angularVelocityChange = beck.angularVelocity * frame.timeDiff * (1 - angularFriction) / 1000;
beck.angularVelocity -= angularVelocityChange;
if (beck.controlled) {
beck.angularVelocity = (beck.rotation - beck.lastRotation) * 1000 / frame.timeDiff;
beck.lastRotation = beck.rotation;
}
else {
beck.rotate(frame.timeDiff * beck.angularVelocity / 1000);
beck.lastRotation = beck.rotation;
}
// draw
animatedLayer.draw();
}
window.onload = function(){
console.log('stage =', stage); // DEBUG
var stage = new Kinetic.Stage({ container: "container", width: 240, height: 320 });
console.log('stage =', stage); // DEBUG
var backgroundLayer = new Kinetic.Layer();
var animatedLayer = new Kinetic.Layer();
var beck = new Image();
beck.onload = function() {
var beck = new Kinetic.Image({
x: 240,
y: stage.getHeight() / 2 - 59,
image: beckHead,
width: 150,
height: 230
});
beckHead.src = "http://test.XXXXX.com/i/beckhead.png";
animatedLayer.add(beck);
};
stage.on("mousedown", function(evt){
this.angularVelocity = 0;
this.controlled = true;
});
// add listeners to container
stage.on("mouseup", function(){
beck.controlled = false;
}, false);
stage.on("mouseout", function(){
beck.controlled = false;
}, false);
stage.on("mousemove", function(){
if (beck.controlled) {
var mousePos = stage.getMousePosition();
var x = (stage.width / 2) - mousePos.x;
var y = (stage.height / 2) - mousePos.y;
beck.rotation = 0.5 * Math.PI + Math.atan(y / x);
if (mousePos.x <= stage.width / 2) {
beck.rotation += Math.PI;
}
}
}, false);
stage.add(backgroundLayer);
stage.add(animatedLayer);
// draw background
var context = backgroundLayer.getContext();
context.save();
context.beginPath();
context.moveTo(stage.width / 2, stage.height / 2);
context.lineTo(stage.width / 2, stage.height);
context.strokeStyle = "#555";
context.lineWidth = 4;
context.stroke();
context.restore();
stage.onFrame(function(frame){
console.log("onFrame fired")
animate(animatedLayer, beck, frame);
});
stage.start();
};
</script>
</head>
<body onmousedown="return false;">
<div id="container"><canvas id="container"></canvas>
</div>
</body>