1

次のようなマウス ツールチップを表示したいと思います。

http://i.imgur.com/nWQLH3K.png

その画像に相対的な座標系で。

75x75 セルの 1 つにマウスを合わせると、その位置がテキストで表示されます。マウスの生の座標しか表示できませんが、写真のように表示するための計算がわかりません。

私は HTML5 の実装にもオープンです。

4

1 に答える 1

1

マウス座標をセル座標に変換してツールチップを表示する方法は次のとおりです

ここに画像の説明を入力

この計算は、マウスがどの 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-22T15:54:20.217 に答える