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

本文介绍了在鼠标悬停在画布上的形状/位置（坐标）上显示工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

我已经添加事件监听器来检测鼠标移动和获取鼠标位置。这是我的部分： / p>

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（条件来检测鼠标悬停） //显示tooltip_function（这是我不知道如何实现的函数）}

解决方案

您可以测试鼠标是否超过您的其中一个循环热点：

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] }

以下是示例代码和演示：

注意：您不需要在演示中显示循环的热点，这只适用于此演示。

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;偏移Y = 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'} ，];画（）; $（＃canvas）。mousemove（function（e）{handleMouseMove（e）;}）; function draw（）{for（var i = 0; i

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

< script src =https：// ajax .googleapis / ajax / libs / jquery / 1.9.1 / jquery.min.js>< / script>< h4>将鼠标悬停在热点圆上< / h4>< canvas id =canvaswidth = 300 height = 300>< / canvas>

I'm trying to display a corresponding tooltip when mouse hovers on certain places on canvas. For example, when the mouse position on the canvas is at the coordinate (100,100), display tooltip1. When mouse position's at (200,200), display tooltip2, etc.,

I've already added event listeners to detect mouse movement and get mouse positions.Here's my part:

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

解决方案

You can test if the mouse is over one of your circular hot-spots like this:

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] }

Here's example code and a Demo:

Note: you don't need to show the circular hotspots as in demo--that's just for this demo

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

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

<script src="ajax.googleapis/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>