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

Question

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

Answer 1

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

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

 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>