2015-04-07 54 views
1

我有一个矩形区域,我正在使用HTML5中的JavaScript填充,并且我需要添加一个工具提示弹出窗口,以在用户在手中触摸/点击时弹出文本在浏览器中保留或悬停在它上面。我已经看过StackOverflow上已有的示例,但似乎没有一个解决这个特定情况,其中包含悬停点的区域是使用JavaScript绘制的。用于在画布中绘制的矩形区域的弹出工具提示

任何援助,将不胜感激,谢谢。

回答

5

做一个简单的工具提示类/对象将处理状态,位置等

  • 这将创建类
  • 当悬停或点击框的一个实例,它会显示
  • 超时后,它会隐藏工具提示

一个考虑,我s未实现:如果显示第二个实例,则前一个未隐藏。创建一个公共方法来清除超时并在其他实例发生这种情况时将其隐藏(将它们存储在数组中并迭代它以调用hide方法)。

无论如何,这应该是一个坚实的基础,以任何你喜欢的方式发展。

var canvas = document.querySelector("canvas"), 
 
    ctx = canvas.getContext("2d"), 
 
    region = {x: 50, y: 50, w: 100, h: 100}; 
 

 
ctx.fillStyle = "#79f"; 
 
ctx.fillRect(region.x, region.y, region.w, region.h); 
 

 
// create a tool-tip instance: 
 
var t1 = new ToolTip(canvas, region, "This is a tool-tip", 150, 3000); 
 

 
// The Tool-Tip instance: 
 
function ToolTip(canvas, region, text, width, timeout) { 
 

 
    var me = this,        // self-reference for event handlers 
 
     div = document.createElement("div"),  // the tool-tip div 
 
     parent = canvas.parentNode,    // parent node for canvas 
 
     visible = false;       // current status 
 
    
 
    // set some initial styles, can be replaced by class-name etc. 
 
    div.style.cssText = "position:fixed;padding:7px;background:gold;pointer-events:none;width:" + width + "px"; 
 
    div.innerHTML = text; 
 
    
 
    // show the tool-tip 
 
    this.show = function(pos) { 
 
    if (!visible) {        // ignore if already shown (or reset time) 
 
     visible = true;       // lock so it's only shown once 
 
     setDivPos(pos);       // set position 
 
     parent.appendChild(div);     // add to parent of canvas 
 
     setTimeout(hide, timeout);    // timeout for hide 
 
    } 
 
    } 
 
    
 
    // hide the tool-tip 
 
    function hide() { 
 
    visible = false;       // hide it after timeout 
 
    parent.removeChild(div);     // remove from DOM 
 
    } 
 

 
    // check mouse position, add limits as wanted... just for example: 
 
    function check(e) { 
 
    var pos = getPos(e), 
 
     posAbs = {x: e.clientX, y: e.clientY}; // div is fixed, so use clientX/Y 
 
    if (!visible && 
 
     pos.x >= region.x && pos.x < region.x + region.w && 
 
     pos.y >= region.y && pos.y < region.y + region.h) { 
 
     me.show(posAbs);       // show tool-tip at this pos 
 
    } 
 
    else setDivPos(posAbs);      // otherwise, update position 
 
    } 
 
    
 
    // get mouse position relative to canvas 
 
    function getPos(e) { 
 
    var r = canvas.getBoundingClientRect(); 
 
    return {x: e.clientX - r.left, y: e.clientY - r.top} 
 
    } 
 
    
 
    // update and adjust div position if needed (anchor to a different corner etc.) 
 
    function setDivPos(pos) { 
 
    if (visible){ 
 
     if (pos.x < 0) pos.x = 0; 
 
     if (pos.y < 0) pos.y = 0; 
 
     // other bound checks here 
 
     div.style.left = pos.x + "px"; 
 
     div.style.top = pos.y + "px"; 
 
    } 
 
    } 
 
    
 
    // we need to use shared event handlers: 
 
    canvas.addEventListener("mousemove", check); 
 
    canvas.addEventListener("click", check); 
 
    
 
}
canvas {border:1px solid blue;background:#eee}
<canvas width=500 height=300></canvas>