Javascript和KinectJS：图像上的鼠标位置？答案

【问题标题】：Javascript and KinectJS: mouse position on image?Javascript和KinectJS：图像上的鼠标位置？
【发布时间】：2013-11-17 13:29:22
【问题描述】：

希望有人有时间和知识来启发我。看： http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/:

有谁知道当鼠标悬停在 yoda 图像上时获取鼠标光标相对于图像位置的位置的编程？

【问题讨论】：

标签： javascript hover kineticjs mouseover

【解决方案1】：

这是基于您的教程中找到的代码的问题解决方案。解决方案是使用 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>

【讨论】：