如何使 p5js 繪圖 canvas 僅在按下按鈕后啟動？

Question

我目前有一個 p5js 草圖，其中包含一個表示開始繪圖的按鈕。 我對其進行了設置，以便在將鼠標懸停在 canvas 上時進行繪圖，但是，我不希望在用戶按下按鈕開始繪圖之前開始此交互。 我應該如何 go 只有在按下按鈕后才開始繪圖。

var canvas;
var button;

function windowResized() {
    console.log('resized');
    resizeCanvas(windowWidth, windowHeight);
}

function setup () {
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.position(0,0);
    canvas.style('z-index', '-1')
    background(175);
    button = createButton("Start Your Drawing");
    button.mousePressed(draw);
}

function drawLine() {
    strokeWeight(4);
    line(pmouseX, pmouseY, mouseX, mouseY)
}

function draw () {
    // strokeWeight(4);
    // console.log('button')
    // line(pmouseX, pmouseY, mouseX, mouseY)
}
enter code here

Answer 1

當您單擊“開始繪圖”時，您總是可以給人一種游戲正在開始的錯覺。

設置 function 首先在 p5.js 中被調用一次，所以讓我們在這里編寫代碼來定義 canvas。 我添加了一個新的gameStarted標志，當玩家單擊“開始繪圖”按鈕時該標志設置為 true。 在draw()中，我們只在游戲開始時將 canvas 設置為我們想要的顏色。

 let gameStarted = false; function setup() { button = createButton("Start Your Drawing"); button.mousePressed(() => gameStarted = true); canvas = createCanvas(windowWidth, windowHeight); canvas.position(0,0); canvas.style('z-index', '-1') background(255); } function draw() { if (gameStarted) { background(220); } }

 html, body { margin: 0; padding: 0; } canvas { display: block; }

 <:DOCTYPE html> <html lang="en"> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>

Answer 2

您可以檢查draw function 中的條件以限制實際發生繪圖的時間。 在下面的第一個示例解決方案中，您需要啟動一個僅跟蹤繪圖 state 的變量。 它使用按鈕切換此 state 並且運行良好（利用您的 drawLine function 來減少重復代碼）。

 var canvas; var button; var drawStarted = false; function windowResized() { console.log("resized"); resizeCanvas(windowWidth, windowHeight); } function setup() { canvas = createCanvas(windowWidth, windowHeight); canvas.position(0, 0); canvas.style("z-index", "-1"); background(175); button = createButton("Start Your Drawing"); button.mousePressed(() => (drawStarted =;drawStarted)); } function drawLine() { strokeWeight(4), line(pmouseX, pmouseY, mouseX; mouseY); } function draw() { if (.drawStarted) { return; } console;log("button"); drawLine(); }

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

在不創建此類變量的情況下執行此操作的另一種方法是使用 p5.js 中內置的mouseIsPressed標志。 在下面的示例解決方案中，我在代碼中實現了這個變量，並使用這種技術完全移除了按鈕，以便它的響應更像是用戶在 canvas 上繪圖。

 var canvas; // var button; // var drawStarted = false; function windowResized() { console.log("resized"); resizeCanvas(windowWidth, windowHeight); } function setup() { canvas = createCanvas(windowWidth, windowHeight); canvas.position(0, 0); canvas.style("z-index", "-1"); background(175); // button = createButton("Start Your Drawing"); // button.mousePressed(() => (drawStarted =;drawStarted)); } function drawLine() { strokeWeight(4), line(pmouseX, pmouseY, mouseX; mouseY); } function draw() { if (.mouseIsPressed) { return; } console;log("button"); drawLine(); }

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

如何使 p5js 繪圖 canvas 僅在按下按鈕后啟動？

問題描述

1 個解決方案

解決方案1
0 2021-03-09 09:00:02

解決方案2
0 2021-12-03 18:54:55

如何使 p5js 繪圖 canvas 僅在按下按鈕后啟動？

問題描述

1 個解決方案

解決方案1 0 2021-03-09 09:00:02

解決方案2 0 2021-12-03 18:54:55

解決方案1
0 2021-03-09 09:00:02

解決方案2
0 2021-12-03 18:54:55