javascript - 在 p5.js 方法中调整窗口大小

Question

我创建了一个开始菜单。这个开始菜单和小游戏应该对窗口调整大小的变化使用react。

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

但是当我用额外的方法编写开始菜单时，开始菜单不会对窗口的大小使用react。我解决了这个问题，因为我将所有内容都写在了draw()函数中。您可以在下面看到我的解决方案。但是我如何在方法中编写“startMenu”和“howToPlayMenu”，并且当我更改窗口的大小时这些方法会使用react。正如我所说，当我更改窗口大小时，下面的代码工作正常。但是当我写在一个方法中时，它不起作用。

function startMenu() {
    hide = false;
}

function howToPlay() {
    hide = true;
}

function draw() {
    if (!started) {
        if (!hide) {
            background(back);
            fill(255);
            textSize(28);
            text('Click me', width / 8, height / 3);
            playButton.show();
            playButton.position(width / 4, height / 2);
            playButton.size(150, 65);
            playButton.style("font-size:50px");
            playButton.mousePressed(start);

            levelSelectorSlider.show();
            levelSelectorSlider.position(2 * width / 3 - 50, height / 2 - 100);
            textSize(28);
            text("Set level", 2 * width / 3 - 20, height / 2 - 120);
            textSize(20)
            text("Easy", 2 * width / 3 - 70, height / 2 - 50);
            text("Medium", 2 * width / 3, height / 2 - 50);
            text("Hard", 2 * width / 3 + 90, height / 2 - 50);

            highScoreButton.show();
            highScoreButton.position(2 * width / 3 - 50, height / 2);
            highScoreButton.size(160, 40);
            highScoreButton.style("font-size:20px");
            highScoreButton.mousePressed(start);

            howToPlayButton.show();
            howToPlayButton.position(2 * width / 3 - 50, height / 2 + 100);
            howToPlayButton.size(160, 40);
            howToPlayButton.style("font-size:20px");
            howToPlayButton.mousePressed(howToPlay);
            goBackButton.hide();
        }
        else {
            background(howToPlayImage);
            playButton.hide();
            highScoreButton.hide();
            howToPlayButton.hide();
            levelSelectorSlider.hide();
            goBackButton.show();
            goBackButton.position(50, 20);
            goBackButton.size(70, 40);
            goBackButton.style("font-size:20px");
            goBackButton.mousePressed(startMenu);
        }
    }
    else {
        //startMenu();
        background(gameBackground); 
        ....
    }
}

Answer 1

再次调用windowResized函数内的startMenu和howToPlayMenu函数。这将使用 Canvas 的新宽度和高度重新定义元素的位置