时间戳

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

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

问题描述

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

标签： javascriptprocessingp5.js

解决方案

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

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

推荐阅读