顯示轉換的JavaScript

元素的鼠標座標我想顯示鼠標工具提示這樣的：顯示轉換的JavaScript

與座標系統相對於它的圖像。

只要鼠標懸停在75x75單元之一上，位置就會以文本顯示。我只能顯示鼠標的原始座標，但無法弄清楚數學顯示的原因，就像它在圖片中一樣。

我也對HTML5實現開放。

來源

2013-07-22 Carter

你把這個形象在畫布上？你有像圖像左上角或圖像的任何角落的任何單一的固定點（x，y）？ –

最初，它是在一個div中，但我正在試驗一個畫布，看看我能否找到另一個解決方案。工具提示可以在任何位置，但單元格的右上角是我想要去的（雖然它並不真正挑剔）。 – Carter

下面是如何轉換鼠標座標的單元座標和顯示工具提示

enter image description here

這種數學計算哪些75x75細胞你的鼠標在裏面：

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

這裏是數學來計算該單元格右上方的尖端矩形：

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

您可以使用畫布在你的計算座標繪製細胞內的提示：

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); 
    }

這裏是代碼和一個小提琴：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>

來源

2013-07-22 15:54:20 markE

顯示轉換的JavaScript

回答

相關問題