Подсказка JQuery в базе координат холста

Я пытаюсь нарисовать график на холсте, каждая вершина имеет свои координаты (в центре круга - радиус 6 пикселей - которые ее представляют).

Я хочу показать всплывающую подсказку, когда я нахожусь над вершиной с помощью мыши... и скрыть эту всплывающую подсказку, когда я не на вершине.

Теперь всплывающая подсказка отображается (только после второго прохода по холсту с помощью мыши) с правильными данными, но когда я больше не на вершине, всплывающая подсказка все еще здесь.

Вот код 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);
    }

В блоке комментариев не работают кодовые строки

Спасибо за помощь заранее!


javascript canvas html jquery tooltip
person CrazybikE    schedule 24.07.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Подсказка jQueryUI появляется, когда указатель мыши находится над любой частью целевого элемента. Вот почему всплывающая подсказка не исчезнет — потому что мышь все еще находится над вашим элементом холста.

Таким образом, jqueryUI Tooltip не очень полезен для отображения подсказок на отдельных рисунках холста, таких как ваши вершины. Да, вы можете заставить его показывать/скрывать способами, не предусмотренными его API, но это также может привести к непреднамеренным сбоям.

Простой альтернативой может быть:

  • Показать/скрыть элемент div, содержащий текст подсказки.
  • Используйте CSS, чтобы расположить tip-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>

person markE    schedule 24.07.2015