0
미안하지만 정말 바보 같은 질문입니다. KineticJS를 사용하는 방법을 배우려고하고 있으며 셰이프 대신 정적 이미지를 사용하는 자습서 (http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/)를 수정하려고합니다. 가치가있는 것을 위해 Glenn Beck 머리의 PNG를 움직이게하려고 노력하고 있습니다 (여기도 실제로는 없습니다).객체에는 아무런 메소드가 없습니다.
지금까지 오류의 무리를 통해 뒤죽박죽했지만 내가 함께 붙어 점점 계속 :
"catch되지 않은 형식 오류 개체 #가있는 방법 '을 onFrame'이 없다"내가 여기에있는 개체/방법에 대한 여러 질문을 읽었습니다 나는 문제가 무엇인지 이해하고 생각하면서 SO 및 다른 사이트와, 나는 그것을 해결하는 방법을 잘 모르겠어요 :
JavaScript object has no method
contains is object has no method?
"이해할 수 없음"오류는 호출 할 수있는 기능이 없음을 의미합니다. 확실히 "onFrame"은 Kinetic 내부에 있지만 ..? 나는 그들이 3.8.X (튜토리얼)와 4.X (내가 사용하고있는 라이브러리) 사이에서 이름을 바꿨는지 알아보기 위해 Kinetic 문서를 살펴 보았지만 마치 그들이 한 것처럼 보이지 않았다. 여기
내 코드 :<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>
예제가 업데이트 된 것으로 보입니다. 나는 저자가 너를 경청한다 것을 나는 생각한다. – allenhwkim
하하! 도와 주셔서 감사합니다! :디 – DRKMTTR