JQuery 基于 canvas 坐标的工具提示
JQuery tooltip in base of canvas coordinates
我正在尝试在 canvas 中绘制图形,每个顶点都有自己的坐标(在圆心 - 6px 半径 - 代表它)。
我想在我用鼠标悬停在顶点上时显示工具提示...并在我不在顶点上时隐藏此工具提示。
现在工具提示显示(仅在第二次使用鼠标 canvas 之后)正确的数据,但是当我不再在顶点上时,工具提示仍然在这里。
这是canvas.addEventListener的代码(只有这里是工具提示)
canvas.addEventListener('mousemove', function(evt) {
var mX = evt.clientX;
var mY = evt.clientY;
mX -= canvas.offsetLeft;
mY -= canvas.offsetTop;
$("canvas").tooltip();
for (i=0; i<points.length; i++) {
if (mX<points[i].x+6 && mX>points[i].x-6) {
if (mY<points[i].y+6 && mY>points[i].y-6) {
var str = getNodeRelations(evt);
x1 = points[i].x-6;
x2 = points[i].x+6;
y1 = points[i].y-6;
y2 = points[i].y+6;
/*if ($("canvas").tooltip("instance") != undefined && $("canvas").tooltip("option", "disabled") == true) {
$("canvas").tooltip("option", "disabled", false);
}*/
$("canvas").tooltip({
content: str,
effect: "fade",
track: true
});
}
}
}
/*if ($("canvas").tooltip("instance") != undefined && ((mX<x1 || mX>x2) && (mY<y1 || mY>y2))) {
$("canvas").tooltip("option", "disabled", true);
}*/
}, false);
}
评论区中的代码行无效
提前感谢您的帮助!
当鼠标悬停在目标元素的任何部分上时,会出现 jQueryUI 工具提示。这就是工具提示不会消失的原因——因为鼠标仍在您的 canvas 元素上。
因此,jqueryUI 工具提示对于在 dividual canvas 绘图(如顶点)上显示提示不是很有用。是的,您可以以其 API 意想不到的方式将其强制为 show/hide,但这也存在意外失败的风险。
一个简单的替代方案可能是:
- Show/hide 包含提示文本的 div 元素。
- 使用CSS定位笔尖-div.
- 点击测试 mousemove 中的每个顶点到 show/hide 尖端-div。
示例起始代码:
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 rects=[];
rects.push({x:50,y:50,w:40,h:25,fill:'red',tip:'I am the red box'});
rects.push({x:50,y:150,w:50,h:75,fill:'blue',tip:'I am the blue box'});
for(var i=0;i<rects.length;i++){
var r=rects[i];
ctx.fillStyle=r.fill;
ctx.fillRect(r.x,r.y,r.w,r.h);
ctx.stroke();
}
$tip=$('#tip');
$tip.hide();
$("#canvas").mousemove(function(e){handleMouseMove(e);});
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);
$tip.hide();
for(var i=0;i<rects.length;i++){
var r=rects[i];
ctx.beginPath();
ctx.moveTo(r.x,r.y);
ctx.lineTo(r.x+r.w,r.y);
ctx.lineTo(r.x+r.w,r.y+r.h);
ctx.lineTo(r.x,r.y+r.h);
ctx.closePath();
if(ctx.isPointInPath(mouseX,mouseY)){
$tip.text(r.tip);
$tip.css({left:e.clientX+3,top:e.clientY-18}).show();
}
}
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
#tip{position:absolute;background:white;border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hover over rectangle to show tooltip.</h4>
<canvas id="canvas" width=300 height=300></canvas>
<div id=tip>Tooltip</div>
我正在尝试在 canvas 中绘制图形,每个顶点都有自己的坐标(在圆心 - 6px 半径 - 代表它)。
我想在我用鼠标悬停在顶点上时显示工具提示...并在我不在顶点上时隐藏此工具提示。
现在工具提示显示(仅在第二次使用鼠标 canvas 之后)正确的数据,但是当我不再在顶点上时,工具提示仍然在这里。
这是canvas.addEventListener的代码(只有这里是工具提示)
canvas.addEventListener('mousemove', function(evt) {
var mX = evt.clientX;
var mY = evt.clientY;
mX -= canvas.offsetLeft;
mY -= canvas.offsetTop;
$("canvas").tooltip();
for (i=0; i<points.length; i++) {
if (mX<points[i].x+6 && mX>points[i].x-6) {
if (mY<points[i].y+6 && mY>points[i].y-6) {
var str = getNodeRelations(evt);
x1 = points[i].x-6;
x2 = points[i].x+6;
y1 = points[i].y-6;
y2 = points[i].y+6;
/*if ($("canvas").tooltip("instance") != undefined && $("canvas").tooltip("option", "disabled") == true) {
$("canvas").tooltip("option", "disabled", false);
}*/
$("canvas").tooltip({
content: str,
effect: "fade",
track: true
});
}
}
}
/*if ($("canvas").tooltip("instance") != undefined && ((mX<x1 || mX>x2) && (mY<y1 || mY>y2))) {
$("canvas").tooltip("option", "disabled", true);
}*/
}, false);
}
评论区中的代码行无效
提前感谢您的帮助!
当鼠标悬停在目标元素的任何部分上时,会出现 jQueryUI 工具提示。这就是工具提示不会消失的原因——因为鼠标仍在您的 canvas 元素上。
因此,jqueryUI 工具提示对于在 dividual canvas 绘图(如顶点)上显示提示不是很有用。是的,您可以以其 API 意想不到的方式将其强制为 show/hide,但这也存在意外失败的风险。
一个简单的替代方案可能是:
- Show/hide 包含提示文本的 div 元素。
- 使用CSS定位笔尖-div.
- 点击测试 mousemove 中的每个顶点到 show/hide 尖端-div。
示例起始代码:
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 rects=[];
rects.push({x:50,y:50,w:40,h:25,fill:'red',tip:'I am the red box'});
rects.push({x:50,y:150,w:50,h:75,fill:'blue',tip:'I am the blue box'});
for(var i=0;i<rects.length;i++){
var r=rects[i];
ctx.fillStyle=r.fill;
ctx.fillRect(r.x,r.y,r.w,r.h);
ctx.stroke();
}
$tip=$('#tip');
$tip.hide();
$("#canvas").mousemove(function(e){handleMouseMove(e);});
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);
$tip.hide();
for(var i=0;i<rects.length;i++){
var r=rects[i];
ctx.beginPath();
ctx.moveTo(r.x,r.y);
ctx.lineTo(r.x+r.w,r.y);
ctx.lineTo(r.x+r.w,r.y+r.h);
ctx.lineTo(r.x,r.y+r.h);
ctx.closePath();
if(ctx.isPointInPath(mouseX,mouseY)){
$tip.text(r.tip);
$tip.css({left:e.clientX+3,top:e.clientY-18}).show();
}
}
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
#tip{position:absolute;background:white;border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hover over rectangle to show tooltip.</h4>
<canvas id="canvas" width=300 height=300></canvas>
<div id=tip>Tooltip</div>