javascript - p5.j​​s:当我的鼠标悬停在正在处理的草图中的不同元素上时，如何使文本出现？

Question

我的草图文件中有不断出现在屏幕上的文本。当我将鼠标悬停在该文本上时，我想在浏览器窗口的一 Angular 显示有关该介绍性文本的更多信息，而不会影响屏幕的其余部分。我该怎么做呢？

Answer 1

如果不看代码，很难确切地知道你想要什么，但这里有一些提示:

您可以使用 createElement 创建一个元素并添加一个悬停事件。当您将鼠标悬停在该元素上时，您可以显示帮助文本。在下面的示例中，我创建了一个元素 hoverOverMe设置一个 bool 值 showInfo如果它被悬停，则为真，如果不是，则为假-然后我将基于此显示一些文本。

let hoverOverMe;
let showInfo = false;
function setup() {
  createCanvas(400, 400);
  hoverOverMe = createElement("h1", "Hover over me");
  hoverOverMe.mouseOver(() => showInfo = true);
  hoverOverMe.mouseOut(() => showInfo = false);
}

function draw() {
  background(220);
  textAlign(CENTER);
  
  if (showInfo) {
    textSize(40);
    text("I'm info text", width / 2, height/2);
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>