如何在 p5JS 中创建鼠标悬停时的工具提示？

Question

我已经开始玩 P5JS，但我想在鼠标悬停在每个数据点上时创建一个工具提示。

我该怎么做？我看过一些使用 map 函数的示例，但不确定它在这里如何工作。

感谢任何帮助！我还不是 JS 开发者！

Answer 1

一般来说，显示特定于显示在 canvas 上的图形的工具提示涉及“命中测试”，也就是说：检查鼠标是否悬停在特定图形上，然后使用某种机制来显示工具提示。

由于你的图形都是圆圈，命中测试很简单。对于您绘制的每个圆，检查到鼠标位置的距离。如果距离小于圆的半径而不是鼠标悬停在该圆上：

let mouseDist = dist(posX, posY, mouseX, mouseY);
if (mouseDist < earthquakeMag * 5) {
  // display tooltip, or set a flag to display the
  // tooltip after the rest of the graphics have been
  // displayed
}

至于显示工具提示，您有两种选择：1) 您可以通过设置 canvas 元素的 title 属性来依赖浏览器元素的本机行为，或者 2) 您可以显示您自己的工具提示。前者的优点是非常琐碎，而后者的优点是你可以更好地控制where/when/how tooltip 的渲染。

选项 1：

let c;

function setup() {
  c = createCanvas(500,500);
  // ...
}

function draw() {
  // ...
  for (var i = 0; i < this.data.getRowCount(); i++) {
    // ...

    let mouseDist = dist(posX, posY, mouseX, mouseY);
    if (mouseDist < earthquakeMag * 5) {
      c.elt.title = 'hit!';
    }
  }
}

选项 2：

  let tooltipText;

  for (var i = 0; i < this.data.getRowCount(); i++) {
    // ...
    
    let mouseDist = dist(posX, posY, mouseX, mouseY);
    if (mouseDist < earthquakeMag * 5) {
      // If we displayed the tooltip at this point then
      // some of the circles would overlap it.
      tooltipText = date_[i];
    }

    // ...
  }
  
  if (tooltipText) {
    // measure the width of the tooltip
    let w = textWidth(tooltipText);

    // save the current fill/stroke/textAlign state
    push();

    // draw a lightgray rectangle with a dimgray border
    fill('lightgray');
    stroke('dimgray');
    strokeWeight(1);
    // draw this rectangle slightly below and to the
    // right of the mouse
    rect(mouseX + 10, mouseY + 10, w + 20, 24, 4);
    textAlign(LEFT, TOP);
    noStroke();
    fill('black');
    text(tooltipText, mouseX + 20, mouseY + 16);

    // restore the previous fill/stroke/textAlign state
    pop();
  }

如何在 p5JS 中创建鼠标悬停时的工具提示？

How can I create a tooltip on mouse over in p5JS?

javascript

data-visualization

tooltip

p5.js

选项 1：

选项 2：