Javascript and KinectJS: mouse position on image?

Question

Hoping someone has the time and knowledge to enlighten me. See: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/:

enter image description here

Does anyone know the programming to get the position of the mouse curser relative to the postion of the image when hovering over the yoda image?

score 0 · Answer 1 · answered Feb 19 '14 at 10:41

Here is a solution to the problem based on the code found in your tutorial. The solution is to use the method on("mousemove", function(event) {}) which is only called when the mouse is over the image.

Hope it helps.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
    <script defer="defer">
      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: 200,
          y: 50,
          image: imageObj,
          width: 106,
          height: 118
        });

        yoda.on('mousemove', function(event) {
          var relativeX = event.x - yoda.getX();
          var relativeY = event.y - yoda.getY();
          console.log("x : " + relativeX);
          console.log("y : " + relativeY);
        });

        // add the shape to the layer
        layer.add(yoda);

        // add the layer to the stage
        stage.add(layer);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

    </script>
  </body>
</html>

Javascript and KinectJS: mouse position on image?

1 Answers1