CodingTrain / CodingTrain/Suggestion-Box

P5.js - Dealing with canvas in the background

Aperta
#201 0 commenti 1 reazione 0 assegnatari Vedi su GitHub
Lingua principale
Nessun dato sulla lingua
Stelle
570
Fork
85
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

Hi, for one of my own project, I needed to realize a full screen animation (character walking on a terrain made of tiles) with dom elements as a user interface. My problem soon became clear : if my canvas was full screen, I couldn't access the dom elements layered "on top" of the canvas (click buttons and such was impossible) .

I found a solution myself, but I believe there are others and would love to see how you'd handle it. I really struggled myself, and I thinks it's a problem (although not a hard one) that is sufficient for a small video in the dom playlist.

My solution :
//________________________________________________________________
var canvas;
var domElement;

function setup(){
canvas = createCanvas(windowWidth, windowHeight)
canvas.position(0,0);

domElement = createButton('You can't click me');
domElement.style("height", "100px");
domElement.style("width", "100px");
domElement.position(0,0));

/*Using this line, the button is clickable. Good thing is, the canvas' surface which is not covered by a dom element is still clickable. I'm literally using this all the time. Allows for easy UI making. */

canvas.style("z-index", "-1");

}

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

La issue menziona un canvas p5.js a schermo intero, pulsanti DOM, createCanvas, windowWidth, windowHeight, canvas.position e canvas.style; non viene indicato alcun file del repository né alcun test. Inizia esaminando il materiale esistente della playlist DOM e considera il lavoro completo quando la guida sul layering tra canvas e DOM è documentata come argomento di un video.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript
Ambito
content, documentation, web-dev
Tipo di issue
Documentazione
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.