おそらく本当にばかげた質問で申し訳ありませんが、私はKineticJSの使用方法を学び、チュートリアル（http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/）を使用するように変更しようとしています形ではなく静止画像。価値があるのは、Glenn Beck の頭の PNG をアニメーション化して回転させようとしていることです (実際にはここでもそこでもありません)。
これまでに一連のエラーを混乱させてきましたが、「Uncaught 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>