CODEWITHSUNDEEP
kineticjs
user1634517
user1634517

Reputation: 3

KineticJS Mouseover not working

I've tried everything to get this to work ending with hard coding the numbers in, but when I mouseover the stage nothing happens at all. The mouseover (or mousemove) will only activate when I'm actually over the image itself. Can anyone tell me how to make an image move left or right whenever I move my mouse over the stage?

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

Upvotes: 0

Views: 1647

Answers (1)

Palani Kumar
Palani Kumar

Reputation: 1137

KineticJS Moverover working when we add the Rectangle(Transparent) before the image. See the below code, its working.

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

Upvotes: 1

Related Questions