Question

当鼠标悬停在画布上的某些位置时，我试图显示相应的工具提示。例如，当画布上的鼠标位置位于坐标（100,100）处时，显示工具提示1。当鼠标位置在（200,200）时，显示工具提示2等，

我已经添加了事件监听器来检测鼠标移动并获得鼠标位置。这是我的一部分：

window.addEventListener('mousemove',hover,false);
function getMousePos (canvas, event) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
}
function hover (event){
    pos = getMousePos(canvas,event);
    if (condition to detect mouse hover)
    //display tooltip_function (this is the function that I don't know how to implement)
}

Answer 1

您可以测试鼠标是否超过您的圆形热点之一：

var hotspots=[
    {x:100,y:100,radius:20,tip:'You are over 100,100'},
    {x:100,y:200,radius:20,tip:'You are over 100,200'},
];

var dx=mouseX-hotspot[0].x;
var dy=mouseY-hotspot[0].y;
if(dx*dx+dy*dy<hotspot[0].radius*hotspot[0].radius){
    // it's over hotspot[0]
}

以下是示例代码和演示：

注意：您不需要像演示一样显示循环热点 - 仅适用于此演示

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var hotspots=[
  {x:100,y:100,radius:20,tip:'You are over 100,100'},
  {x:100,y:200,radius:20,tip:'You are over 100,200'},
];

draw();

  $("#canvas").mousemove(function(e){handleMouseMove(e);});

  function draw(){
  for(var i=0;i<hotspots.length;i++){
  var h=hotspots[i];
ctx.beginPath();
ctx.arc(h.x,h.y,h.radius,0,Math.PI*2);
ctx.closePath();
ctx.stroke();
}
}
function handleMouseMove(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  ctx.clearRect(0,0,cw,ch);
  draw();
  for(var i=0;i<hotspots.length;i++){
    var h=hotspots[i];
    var dx=mouseX-h.x;
    var dy=mouseY-h.y;
    if(dx*dx+dy*dy<h.radius*h.radius){
      ctx.fillText(h.tip,h.x,h.y);
    }
  }

}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hover over a hotspot circle</h4>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

在鼠标上显示工具提示悬停在画布上的形状/位置（坐标）上

1 个答案: