Javascript и KinectJS: положение мыши на изображении?

Надеясь, что у кого-то есть время и знания, чтобы просветить меня. См: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/:Javascript и KinectJS: положение мыши на изображении?

enter image description here

Кто-нибудь знает программирования, чтобы получить позицию мыши curser относительно постион изображения при наведении на Йоду изображение?

источник

2013-11-17 user3001650

Решение проблемы на основе кода, содержащегося в вашем учебнике. Решение заключается в использовании метода on («mousemove», function (event) {}), который вызывается только тогда, когда мышь находится над изображением.

Надеюсь, это поможет.

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

источник

2014-02-19 10:41:32

Javascript и KinectJS: положение мыши на изображении?

ответ

Смежные вопросы