p5js 每次点击时都会添加 div

Question

#嘿-PeePs。问题发生在 p5js 中：

我有：1 个函数()、1 个绘图()、2 个草图(canvas)

使用：实例模式

我只想要一个画廊！有一个缩略图大小的图像，当点击变成全尺寸时，这就是我有 2 canvases 的原因。以下代码正在运行。它将创建一个带有图像缩略图大小的 canvas，然后当我单击它时，它将创建一个包含全屏图像的 DIV。

问题是，每次我单击缩略图时，它都会创建另一个 DIV，然后继续。我如何为此设置条件？所以它只会绘制一次！

var PictureThumbnail = function(p) {
  let ThumbImage;
  let fullSize;
  
  p.preload = function() {
    ThumbImage = p.loadImage('https://www.paulwheeler.us/files/Coin120.png');
  };

  p.setup = function() {
    var canvas = p.createCanvas(100, 100);
    canvas.parent('#Thumbnail');

    fullSize = createDiv('Full Size Image');
    fullSize.addClass('fullSize');
    fullSize.hide();
  };

  p.draw = function() {
    p.image(ThumbImage, 0, 0, 700, 70);
    if (mouseIsPressed) {
      if ((p.mouseX > 0) && (p.mouseX < 100) && (p.mouseY > 0) && (p.mouseY < 100)) {
        fullSize.show();

        let sketch2 = function(p) {
          p.setup = function() {
            p.createCanvas(500, 500);
            p.background(255);
          }
        };
        new p5(sketch2, window.document.getElementById('fullSize'));
      }
    }
  };
};

let sketch = new p5(PictureThumbnail);

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>

<body>
  <div id="Thumbnail"></div>
</body>
</html>

最后一行代码是问题。

new p5(sketch2, window.document.getElementById('fullSize'));

Answer 1

存在一些问题：

1。无效引用：

您有多个对全局 p5.js 方法和属性的引用，您应该在其中引用实例方法（createDiv 和 mouseIsPressed）。

2。 `draw()` 中应在 `mousePressed()`

中执行的操作

您使用 mouseIsPressed 的方式有缺陷。绘制将重复运行，mouseIsPressed 将在多次调用后 true，因此您将重复创建 sketch2.

3。尝试通过不存在的id获取元素

您创建了一个 div class 'fullSize' 而没有 id 然后您尝试获取一个 id [=20] 的元素=] 但不存在这样的元素。

这是一个工作示例：

var PictureThumbnail = function(p) {
  let ThumbImage;
  let fullSize;
  let fullSizeOpen = false;

  p.preload = function() {
    ThumbImage = p.loadImage('https://www.paulwheeler.us/files/Coin120.png');
  };

  p.setup = function() {
    var canvas = p.createCanvas(100, 100);
    canvas.parent('#Thumbnail');

    fullSize = p.createDiv('Full Size Image');
    fullSize.addClass('fullSize');
    fullSize.id('fullSize');
    fullSize.hide();
  };

  p.mousePressed = function() {
    if ((p.mouseX > 0) && (p.mouseX < 100) && (p.mouseY > 0) && (p.mouseY < 100)) {
      if (!fullSizeOpen) {
        fullSizeOpen = true;
        fullSize.show();

        let sketch2 = function(p) {
          p.setup = function() {
            p.createCanvas(500, 500);
            p.background('red');
          }
        };
        new p5(sketch2, window.document.getElementById('fullSize'));
      }
    }
  }

  p.draw = function() {
    p.image(ThumbImage, 0, 0, 700, 70);
  };
};

let sketch = new p5(PictureThumbnail);

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>

<body>
  <div id="Thumbnail"></div>
</body>

</html>

p5js 每次点击时都会添加 div

p5js is adding div each time when click

javascript

p5.js

1。无效引用：

2。 `draw()` 中应在 `mousePressed()`

3。尝试通过不存在的id获取元素

p5js 每次点击时都会添加 div

p5js is adding div each time when click

javascript

p5.js

1。无效引用：

2。 draw() 中应在 mousePressed()

3。尝试通过不存在的id获取元素

2。 `draw()` 中应在 `mousePressed()`