画布位置上的 p5.js 元素

Question

I'm coding a p5.js game and i have to draw a button, an input and ap html elements over my canvas.我正在编写一个 p5.js 游戏，我必须在我的画布上绘制一个按钮、一个输入和 ap html 元素。 I wanna have all this elements centered relative to the canvas.我想让所有这些元素都相对于画布居中。

I tried this solution without success:我尝试了这个解决方案但没有成功：

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

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

I have a div with game-cointainer id and this work until i center the div by css.我有一个带有 game-cointainer id 的 div，这项工作直到我通过 css 将 div 居中为止。 When I center the div the canvas get centered but the input position remain relative to the div and not to the canvas.当我将 div 居中时，画布居中，但输入位置保持相对于 div 而不是画布。

So this is a responsive html page powered with MDL framework.所以这是一个由 MDL 框架驱动的响应式 html 页面。 If i center the canvas with "mdl-layout-spacer" div before and after my "game-container" div, the canvas stay to the center but input remain to left (300 px from the left of my game-container div).如果我在“游戏容器”div 之前和之后使用“mdl-layout-spacer”div 将画布居中，则画布会保持在中心，但输入仍会向左（距游戏容器 div 左侧 300 像素）。

If i center the game-container div with mdl col offset both inout and canvas are centered but i lose the responsive center.如果我将带有 mdl col 偏移的游戏容器 div 居中，则 inout 和 canvas 都居中，但我失去了响应中心。 Anyone that is good with p5.js know how i can solve this problem?任何擅长 p5.js 的人都知道我如何解决这个问题？

Answer 1

This is because you are loading the input object before you load the CSS page.这是因为您在加载 CSS 页面之前加载了输入对象。 Either put the script tag after the css tag, or put要么将脚本标签放在 css 标签之后，要么把

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

into your setup() function.进入您的setup()函数。

Answer 2

Your problem is that the p5 button is position absolute你的问题是 p5 按钮是绝对位置
Solution:解决方案：

Create a div called container.创建一个名为容器的 div。 Apply some flexbox so the children are centred应用一些 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;
        }

Now add a div sketch to your container.现在向您的容器添加一个 div 草图。 The sketch will be centred vertically and horizontally.草图将垂直和水平居中。 It's important to add this div because its size will be equal to your canvas size.添加此 div 很重要，因为它的大小将等于您的画布大小。 You can then add the button to this canvas.然后，您可以将按钮添加到此画布。 The sketch div needs position: relative to override the absolute position of the button草图 div 需要 position:relative 来覆盖按钮的绝对位置

#sketch {
            position: relative;
        }

Now you can create your canvas and button.现在您可以创建画布和按钮。 Then add both of them to the sketch然后将它们都添加到草图中

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);
}

The result is a vertically and horizontally centred sketch with a button relative to the sketch top left.结果是一个垂直和水平居中的草图，带有一个相对于草图左上角的按钮。 Please try the example below.请尝试以下示例。 I coloured the divs for you.我为你着色了 div。 Container:red, Sketch:green, Canvas: grey values.容器：红色，草图：绿色，画布：灰度值。 You won't see much green because its covered with the Canvas你不会看到太多绿色，因为它被 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>

I hope I was able to help you guys.我希望我能够帮助你们。 Have a nice day祝你今天过得愉快

画布位置上的 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