2012-03-20 3 views
1

KineticJS를 사용하여 이미지를 움직여서 화면을 움직이려고하는데 기능 오류가 계속 발생합니다. 이미지가 잘 표시되지만 imageObj.move가 함수가 아니며 계속 그 이유를 알 수 없다는 말을 계속합니다. 나는 자바 스크립트와 KineticJS에 다소 익숙하다. 그래서 나는 정말로 기본적인 오류를 만들 수있다. 그래서 약간의 도움은 매우 환영받을 것이다. 감사!KineticJS 이미지 애니메이션 적용 방법

window.onload = function(){ //init function 
var stage = new Kinetic.Stage("container", 600, 600); 
var fluffyImgLayer = new Kinetic.Layer(); 

var imageObj = new Image(); 
imageObj.onload = function(){ 
    imageF = new Kinetic.Image({ 
     x: 0, 
     y: 250, 
     image: imageObj, 
    }); 

    fluffyImgLayer.add(imageF); 

    stage.add(fluffyImgLayer); 
    } 

    imageObj.src = "Flutter_Fluffy_100.png"; 

    stage.onFrame(function(frame){ 
     console.log("fired") 
     imageObj.move(10,10); 
     fluffyImgLayer.draw(); 
    }); 

    var period = 2000; 

    stage.start(); 
} 
+0

을 또한 도움이된다면, 내가 imageF가 정의되지 않은 것으로 오류가 발생 imageF.move (10,10)를 호출하려고하면. – marblecatdog

답변

1

당신이 뭔가를 할 수 그것으로 할 수 :

var imageF = new Kinetic.image({ 

가에서보세요 :

imageObj.x += 3; 
imageObj.y += 3; 

당신은 imageF 앞에 VAR를 추가 할 필요가 http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

move()를 정의하지 않았기 때문에 오류가 발생했습니다. anyw 이리. 당신은 이동 기능을 만들 수 있으며, 개체가 그것을 사용할 수 있습니다. 또는, 당신은 함수를 다음과 같이 만들 수 있습니다 :

function moveMyThing(myObj, xchange, ychange) 
{ 
    myObj.x += xchange; 
    myObj.y += ychange; 
} 

다음과 전화 : 모두 괜찮아, 그래서이 셋은 실제로는 매우 빠른 경우

moveMyThing(imageObj, 3, 3); 

KineticJS는 60 FPS 주위 새로 고침하는 경향이있다. 또한 운동 논리를 업데이트 할 시점인지 여부도 확인하는 것이 좋습니다. 그것들을 분리하는 것이 가장 좋을 것입니다.

예 :

stage.onFrame(function(frame){ 
    console.log("fired") 
    time++; 
    if(readyToThink(time, 6)) //check if you want to do something 
     moveMyThing(imageObj,3,3); //Then move it... 
    fluffyImgLayer.draw(); 
}); 

function readyToThink(time, limit){ 
    if(time > limit) //some amount of time to get here 
    { 
    time = 0; //reset counter 
    return true; 
    } 
    return false; 
} 

가 jumpiness을 설명하려면, 당신은 움직임을 트위닝 할 수 있습니다.

+2

실제로, 다시 그리기 횟수를 줄이려면 다음과 같이 throttle 메소드로 레이어 그리기를 조절할 수 있습니다. layer.setThrottle (10); 그것은 드로어를 초당 10 프레임으로 조절합니다 –

4

실제로 질문에 대답하기 위해 문제는 이미지 개체에 Kinetic.Image 개체가 아닌 KineticJS 메서드를 사용하려고한다는 것입니다. 대신를 사용

imageF.move(10,10);

관련 문제