Question

嘿我正在尝试在画布点上创建工具提示。我有一个非常简单的三角形，我想在他的每个边缘创建一个工具提示。这意味着我需要3个三角形的工具提示。这是我到目前为止所取得的成就，我成功地将听众添加到了mosueover和mosueclick。我可以为每个点添加工具提示吗？如果可以的话，我可以将这样的工具提示添加到圆圈吗？

更新

我已经浏览了以下链接：tooltip canvas并在我的代码上实现它。问题是，工具提示没有显示在三角形中的每个点上，并且它有毛刺。我已经更新了代码，请看一下。这是新增加的：

if (ctx.isPointInPath(mouse.x, mouse.y)) {
  $tip.text("I have a tip for you:(x:" + mouse.x + "y:" + mouse.y + ")");
  $tip.css({
    left: e.clientX + 3,
    top: e.clientY - 18
  }).show();

问题是，当我在三角形内部单击时，工具提示会显示在远离当前位置的位置。

$(function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var triangle = [{
    x: 58,
    y: 845
  }, {
    x: 984,
    y: 845
  }, {
    x: 521,
    y: 41
  }];
  drawTriangle(triangle);
  $tip = $('#tip');
  $tip.hide();

  // define tooltips for each data point  
  function drawTriangle(t) {
    ctx.beginPath();
    ctx.moveTo(t[0].x, t[0].y);
    ctx.lineTo(t[1].x, t[1].y);
    ctx.lineTo(t[2].x, t[2].y);
    ctx.closePath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.stroke();
  }
  var canvasPosition = {
    x: canvas.offsetLeft,
    y: canvas.offsetTop
  };

  canvas.addEventListener("click", function(e) {
    e.preventDefault();
    // use pageX and pageY to get the mouse position
    // relative to the browser window
    var mouse = {
      x: e.pageX - canvasPosition.x,
      y: e.pageY - canvasPosition.y
    }
    if (ctx.isPointInPath(mouse.x, mouse.y)) {
      $tip.text("I have a tip for you:(x:" + mouse.x + "y:" + mouse.y + ")");
      $tip.css({
        left: e.clientX + 3,
        top: e.clientY - 18
      }).show();
    }

  });

})

#tip {
  position: absolute;
  background: white;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas-wrapper">
  <canvas id="canvas" width=1024 height=980></canvas>
  <div id=tip>Tooltip</div>
</div>

Answer 1

您的更新代码几乎可以使用，但您需要考虑窗口滚动。

您可以通过订阅window.onscroll事件然后更新画布偏移量变量来实现。调整窗口大小也会影响画布的相对位置，因此更新画布偏移量变量以响应window.onresize事件。

// create vars that hold the canvas offset vs the window
var offsetX,offsetY;
reOffset();

// subscribe to scroll & resize events
// and recalculate the offset 
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

// calculate the current canvas offset vs the window
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}

如何为画布点创建简单而先进的工具提示

1 个答案: