画布中绘制的矩形区域的弹出工具提示

Question

我有一个矩形区域,我正在使用HTML5中的JavaScript填充,我需要添加一个工具提示弹出窗口,以便在用户手持触摸/点击它或在浏览器中悬停它时显示文本.我已经查看了StackOverflow上已有的示例,但它们似乎都没有解决这种特定情况,其中包含悬停点的区域是使用JavaScript绘制的.

任何帮助将不胜感激,谢谢.

Answer 1

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

例

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

未实现的一个注意事项:如果显示第二个实例,则不隐藏前一个实例.创建一个公共方法,它将清除超时并在其他实例发生这种情况时将其隐藏(将它们存储在一个数组中并迭代它以调用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>