KineticJS Mouseover不能正常工作

我試過一切都是爲了讓這個工作結束，並且硬編碼數字，但是當我將鼠標懸停在舞臺上時，什麼都沒有發生。鼠標懸停（或鼠標移動）只會在我實際上處於圖像本身時激活。任何人都可以告訴我如何將圖像向左或向右移動，只要我將鼠標移到舞臺上？KineticJS Mouseover不能正常工作

stage.on('mouseover', function(){ var mousePos = stage.getUserPosition(); if (mousePos.x >= 289) { rect.move(5, 0); } else { rect.move(-5,0); } stage.add(layer); });

來源

2012-08-29 user1634517

KineticJS Moverover當我們像前添加矩形（透明）工作。看下面的代碼，它的工作。

<!DOCTYPE HTML> 
<html> 
    <head>  
    <style>  
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     canvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script> 
    <script> 
     window.onload = function() { 
     var stage = new Kinetic.Stage({ 
      container: "container", 
      width: 578, 
      height: 200 
     }); 
     var layer = new Kinetic.Layer(); 
     var imageObj = new Image(); 
     imageObj.onload = function() { 
      var yoda = new Kinetic.Image({ 
      x: 140, 
      y: stage.getHeight()/2 - 59, 
      image: imageObj, 
      width: 106, 
      height: 118 
      });   
      var rect = new Kinetic.Rect({ 
       x: 0, 
       y: 0, 
       width: stage.getWidth(), 
       height: stage.getHeight() 
      }); 

      layer.add(rect); 
      layer.add(yoda); 
      stage.add(layer); 

      stage.on('mousemove', function(){ 
      var mousePos = stage.getUserPosition(); 
      if (mousePos.x >= 289) 
      { 
       yoda.move(5, 0); 
      } 
      else 
      { 
       yoda.move(-5, 0); 
      } 
      layer.draw(); 
      }); 
     }; 
     imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"; 
     }; 
    </script> 
    </head> 
    <body> 
    <div id="container"></div> 
    </body> 
</html>

來源

2012-08-30 10:41:59

非常感謝。這工作完美。 – user1634517

KineticJS Mouseover不能正常工作

回答

相關問題