在鼠标悬停在 canvas 的 shapes/position(坐标)上时显示工具提示
Displaying tooltips on mouse hover on shapes/position(coordinates) on canvas
我试图在鼠标悬停在 canvas 的某些地方时显示相应的工具提示。例如,当canvas上的鼠标位置在坐标(100,100)时,显示tooltip1。当鼠标位置在(200,200)时,显示tooltip2等,
我已经添加了事件侦听器来检测鼠标移动并获取鼠标positions.Here我的部分:
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)
}
您可以像这样测试鼠标是否在您的圆形热点之一上:
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;
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="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>
我试图在鼠标悬停在 canvas 的某些地方时显示相应的工具提示。例如,当canvas上的鼠标位置在坐标(100,100)时,显示tooltip1。当鼠标位置在(200,200)时,显示tooltip2等,
我已经添加了事件侦听器来检测鼠标移动并获取鼠标positions.Here我的部分:
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)
}
您可以像这样测试鼠标是否在您的圆形热点之一上:
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;
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="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>