KineticJS La souris ne fonctionne pas

J'ai tout essayé pour que cela fonctionne et que je finisse par coder les chiffres, mais quand je souris sur la scène, rien ne se passe. Le mouseover (ou mousemove) ne s'activera que lorsque je serai sur l'image elle-même. Quelqu'un peut-il me dire comment faire bouger une image à gauche ou à droite chaque fois que je déplace ma souris sur la scène?KineticJS La souris ne fonctionne pas

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

Source

2012-08-29 user1634517

KineticJS Moverover travail lorsque nous ajoutons le rectangle (transparent) avant l'image. Voir le code ci-dessous, son fonctionnement.

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

Source

2012-08-30 10:41:59

Merci beaucoup. Cela a fonctionné parfaitement. – user1634517

KineticJS La souris ne fonctionne pas

Répondre

Questions connexes