时间戳

首页 > 解决方案 > 点击其他任何地方隐藏js p5

p5.js - 点击其他任何地方隐藏js p5

问题描述

使用js p5 试图制作一个椭圆，当我点击它时，我会得到一个包含 som 数据或文本的小窗口，我希望能够在我点击这个小窗口的其他任何地方时隐藏这个小窗口。就像当你在谷歌地图上按下一个地方并获得地点信息时，当你点击其他任何地方时，这个信息窗口会被隐藏，你可以尝试点击另一个地方。

我想用 JS P5 得到这个

谢谢你

标签： p5.js

解决方案

我想有一种方法可以做到这一点。您可以创建一个对象，随便调用它，并在其中包含一个 x 和 y 变量（例如 this.x 和 this.yi 无法想到名称 rn）和一个 clicked 变量，该变量将为真或假。在主绘制循环之外，您可以使用函数 mousePressed 并编写如下内容：

function mousePressed() {
  if (mouseX > this.x - [the width of the ellipse / 2] && mousex < this.x + [width of ellipse / 2] && mouseY > this.y - [height of the ellipse / 2] && mouseY < this.y + [height of ellipse / 2]) {
    if (!ellipse.clicked) {
      ellipse.clikced = true;
    }
  } else {
    ellipse.clicked = false;
  }
}

（请原谅 if 语句的长度，如果我正确，它只是检查椭圆）如果你想要多个，你可以有一个 for 循环，然后在对象内部的一个名为 display 的函数中有类似的东西

display() {
  ellipse(this.x, this.y, [width], [lenght]);
  // placeholder for the menu
  if (this.clicked) {
    rect(this.x, this.y, 30, 50);
  }
}

或类似的东西。

我希望这有效并帮助了你！

推荐阅读