如何在動力學中移動圖像？

我試圖移動圖像，但我不能如何在動力學中移動圖像？

... 
    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

幾個錯誤：

所以顯示您的更改，一定要吸取層
您要移動的元素是yoda，而不是imageObj：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

如何在動力學中移動圖像？

回答

相關問題