基于画布坐标的JQuery工具提示

Question

我试图在画布上画一张图，每个顶点都有自己的坐标(圆心-- 6px半径--代表它)。

我想显示一个工具提示时，当我在一个顶点与mouse...and隐藏这个工具提示，当我不在一个顶点。

现在工具提示用正确的数据显示(只在第二次使用鼠标在画布上通过后)，但是当我不再使用顶点时，工具提示仍然在这里。

下面是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);
    }

在注释块中没有工作代码线。

感谢您提前提供帮助！

Answer 1

当鼠标位于目标元素的任何部分时，就会出现jQueryUI工具提示。这就是为什么工具提示不会褪色的原因--因为鼠标仍然在画布元素上。

因此，jqueryUI工具提示对于在单个画布绘图(如顶点)上显示提示并不十分有用。是的，您可以强制它以它的API无意中的方式显示/隐藏，但这也会导致意外的失败。

一个简单的备选办法可能是：

• 显示/隐藏包含提示文本的div元素。
• 使用CSS定位提示-div。
• 点击-测试摩丝表情中的每个顶点以显示/隐藏提示-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>

​