키네틱 이미지를 이동하는 방법은 무엇입니까?

나는 이미지를 이동하려고하지만,있어 내가 할 수없는키네틱 이미지를 이동하는 방법은 무엇입니까?

... 
    var imageObj = new Image(); 
     imageObj.onload = function() { 
     var yoda = new Kinetic.Image({ 
      x: 200, 
      y: 50, 
      image: imageObj, 
      width: 106, 
      height: 118 
     }); 
.... 
    // event button - move image; 

    document.getElementById('show').addEventListener('click', function() { 
     imageObj.move(0,5);    
    }, false);

출처

2014-01-09 user3178951

몇 가지 버그 : 변경 사항이 표시되도록

레이어를 그릴해야 할
이동하려는 요소는 imageObj가 아닌 yoda입니다. yoda.move (0,5)
yoda 객체는 imageObj.onload 외부에서 선언해야합니다. 그것의 범위는 나중에 여기

는 코드와 바이올린의 : http://jsfiddle.net/m1erickson/T2pfZ/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 

<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    var yoda; 


    var imageObj = new Image(); 
    imageObj.onload = function() { 
     yoda = new Kinetic.Image({ 
      x: 200, 
      y: 50, 
      image: imageObj, 
      width: 106, 
      height: 118 
     }); 
     layer.add(yoda); 
     layer.draw(); 
    } 
    imageObj.src="houseicon.png"; 

    document.getElementById('show').addEventListener('click', function() { 
     yoda.move(0,5);    
     layer.draw(); 
    }, false); 


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <button id="show">Move!</button> 
    <div id="container"></div> 
</body> 
</html>

출처

2014-01-09 20:41:55 markE

는 document.getElementById를 ('쇼') 또는 addEventListener ('클릭'기능() { imageObj을 작동하지 않습니다.. 이동 (10,10); \t layer.draw(); }, false); – user3178951

코드를 다시 살펴본 후 제 대답을 수정했습니다 ... – markE

완벽!, 잘 작동합니다. 감사합니다. 많이 도와 주셨습니다. – user3178951

키네틱 이미지를 이동하는 방법은 무엇입니까?

답변

관련 문제