KineticJS 마우스 오버가 작동하지 않습니다.

숫자를 하드 코딩하여 작동하도록하려면이 모든 것을 시도했지만 마우스 오버 할 때 아무 일도 일어나지 않습니다. mouseover (또는 mousemove)는 실제로 이미지 자체 위에있을 때만 활성화됩니다. 무대 위로 마우스를 움직일 때마다 이미지를 왼쪽이나 오른쪽으로 움직이는 법을 누군가에게 말해 줄 수 있습니까? 우리는 이미지 전에 (투명) 사각형을 추가 할 때 작업KineticJS 마우스 오버가 작동하지 않습니다.

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 마우스 오버가 작동하지 않습니다.

답변

관련 문제