p5.js Element auf Leinwand Positionen

Question

Ich codiere ein p5.js Spiel und ich muss einen Knopf, eine Eingabe und ein p html Elemente über meine Leinwand zeichnen. Ich möchte alle diese Elemente relativ zur Leinwand zentriert haben.

habe ich versucht, diese Lösung ohne Erfolg:

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

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

ich ein div mit Spiel-cointainer id haben und diese Arbeit, bis ich die div von CSS zentrieren. Wenn ich das div zentriere, wird die Leinwand zentriert, aber die Eingabeposition bleibt relativ zum div und nicht zur Leinwand.

Dies ist also eine responsive HTML-Seite mit MDL-Framework. Wenn ich die Zeichenfläche mit "mdl-layout-spacer" div vor und nach meinem "game-container" div zentriere, bleibe die Leinwand in der Mitte, aber die Eingabe bleibt links (300 px von links von meinem Spielcontainer div).

Wenn ich das Game-Container-Div mit MDL Col Offset zentriere, werden sowohl Inout als auch Canvas zentriert, aber ich verliere das reaktive Zentrum. Wer mit p5.js gut ist, weiß, wie ich dieses Problem lösen kann?

Answer 1

Dies liegt daran, dass Sie das Eingabeobjekt laden, bevor Sie die CSS-Seite laden. Entweder setzen Sie den Script-Tag nach dem CSS-Tag oder setzen

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

in Ihre setup() Funktion.