畫布位置上的 p5.js 元素

Question

我正在編寫一個 p5.js 游戲，我必須在我的畫布上繪制一個按鈕、一個輸入和 ap html 元素。 我想讓所有這些元素都相對於畫布居中。

我嘗試了這個解決方案但沒有成功：

var gameCanvas = createCanvas(600, 600);
gameCanvas.parent("game-container"); 

input = createInput();
input.position(280, 300);
input.parent("game-container");

我有一個帶有 game-cointainer id 的 div，這項工作直到我通過 css 將 div 居中為止。 當我將 div 居中時，畫布居中，但輸入位置保持相對於 div 而不是畫布。

所以這是一個由 MDL 框架驅動的響應式 html 頁面。 如果我在“游戲容器”div 之前和之后使用“mdl-layout-spacer”div 將畫布居中，則畫布會保持在中心，但輸入仍會向左（距游戲容器 div 左側 300 像素）。

如果我將帶有 mdl col 偏移的游戲容器 div 居中，則 inout 和 canvas 都居中，但我失去了響應中心。 任何擅長 p5.js 的人都知道我如何解決這個問題？

Answer 1

這是因為您在加載 CSS 頁面之前加載了輸入對象。 要么將腳本標簽放在 css 標簽之后，要么把

input = createInput();
input.position(280, 300);
input.parent("game-container");

進入您的setup()函數。

Answer 2

你的問題是 p5 按鈕是絕對位置
解決方案：

創建一個名為容器的 div。 應用一些 flexbox 讓孩子們居中

#container {
            min-height: 100vh; /*vertical center*/
            min-height: -webkit-fill-available; /*mobile viewport bug fix*/
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

現在向您的容器添加一個 div 草圖。 草圖將垂直和水平居中。 添加此 div 很重要，因為它的大小將等於您的畫布大小。 然后，您可以將按鈕添加到此畫布。 草圖 div 需要 position:relative 來覆蓋按鈕的絕對位置

#sketch {
            position: relative;
        }

現在您可以創建畫布和按鈕。 然后將它們都添加到草圖中

function setup() {
  let canvas = createCanvas(100, 100);
  canvas.parent("sketch");

  background(0);

  button = createButton('click me');
  button.mousePressed(changeBG);
  button.position(0, 0);
  button.parent("sketch");      
}

function changeBG() {
  let val = random(255);
  background(val);
}

結果是一個垂直和水平居中的草圖，帶有一個相對於草圖左上角的按鈕。 請嘗試以下示例。 我為你着色了 div。 容器：紅色，草圖：綠色，畫布：灰度值。 你不會看到太多綠色，因為它被 Canvas 覆蓋

 function changeBG() { let val = random(255); background(val); } function setup() { let canvas = createCanvas(100, 100); canvas.parent("sketch"); background(0); let button = createButton('click me'); button.position(0, 0); button.mousePressed(changeBG); button.parent("sketch"); }

 body { margin: 0; } #container { min-height: 100vh; /* mobile viewport bug fix */ min-height: -webkit-fill-available; display: flex; align-items: center; justify-content: center; position: relative; background-color: red; } #sketch { position: relative; background-color: green; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div id="container"> <div id="sketch"> </div> </div> </body> </html>

我希望我能夠幫助你們。 祝你今天過得愉快

畫布位置上的 p5.js 元素

問題描述

2 個解決方案

解決方案1
0 2016-12-28 00:35:38

解決方案2
0 2021-07-29 14:19:36

畫布位置上的 p5.js 元素

問題描述

2 個解決方案

解決方案1 0 2016-12-28 00:35:38

解決方案2 0 2021-07-29 14:19:36

解決方案1
0 2016-12-28 00:35:38

解決方案2
0 2021-07-29 14:19:36