Show converted mouse coordinates of an element with javascript

问题

I'd like to show a mouse tooltip like this:

with a coordinate system relative to its image.

Whenever the mouse is hovered over one of the 75x75 cells, the position is displayed in text. I can only show the mouse's raw coordinates, but can't figure out the math to display it like it is in the picture.

I'm open to HTML5 implementations as well.

回答1:

Here’s how to convert mouse coordinates to cell coordinates and display a tooltip

This math calculates which 75x75 cell your mouse is inside:

      var col=parseInt(mouseX/75);
      var row=parseInt(mouseY/75);

And here is the math to calculate a tip rectangle in the upper-right of that cell:

      var tipX=tipCol*75+75-tipWidth;
      var tipY=tipRow*75;

You can use canvas to draw the tip inside the cell at your calculated coordinates:

    function tip(x,y){
      var tipX=tipCol*75+75-tipWidth;
      var tipY=tipRow*75;
      ctx.beginPath();
      ctx.rect(tipX,tipY,tipWidth,tipHeight);
      ctx.fillStyle="ivory";
      ctx.fill();
      ctx.fillStyle="blue";
      ctx.fillText(tipCol+","+tipRow,tipX+2,tipY+17);
    }

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9V5QK/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:25px;}
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    var tipWidth=35;
    var tipHeight=22;
    var tipRow;
    var tipCol;

    ctx.font="14pt verdana";

    draw();

    function draw(){

        // you would just draw your image here
        // ctx.drawImage(0,0,image.width,image.height);

        // but for illustration, this just recreates your image
        ctx.beginPath();
        ctx.rect(0,0,375,225);
        for(var x=1;x<5;x++){ ctx.moveTo(x*75,0); ctx.lineTo(x*75,canvas.height); }
        for(var y=1;y<3;y++){ ctx.moveTo(0,y*75); ctx.lineTo(canvas.width,y*75); }
        ctx.fillStyle="black";
        ctx.fill();
        ctx.strokeStyle="gray";
        ctx.lineWidth=2;
        ctx.stroke();
    }

    function tip(x,y){
      var tipX=tipCol*75+75-tipWidth;
      var tipY=tipRow*75;
      ctx.beginPath();
      ctx.rect(tipX,tipY,tipWidth,tipHeight);
      ctx.fillStyle="ivory";
      ctx.fill();
      ctx.fillStyle="blue";
      ctx.fillText(tipCol+","+tipRow,tipX+2,tipY+17);
    }


    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#movelog").html("Move: "+ mouseX + " / " + mouseY);

      // Put your mousemove stuff here
      var col=parseInt(mouseX/75);
      var row=parseInt(mouseY/75);
      if(!(row==tipRow && col==tipCol)){
          tipCol=col;
          tipRow=row;
          draw();
          tip();
      }


    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <p>Move mouse over grid to display current cell</p>
    <p id="movelog">Move</p>
    <canvas id="canvas" width=375 height=225></canvas>
</body>
</html>

来源：https://stackoverflow.com/questions/17790027/show-converted-mouse-coordinates-of-an-element-with-javascript

标签

javascript

html5-canvas

mouse

coordinates