Posizioni assolute del mouse sull'elaborazione

Question

Questa è una copia incolla di un post che ho scritto sul forum di elaborazione (dove non ho una risposta finora) pensato che potrei anche provare qui.

L'elaborazione è un modo molto interessante per disegnare cose, specialmente per le pagine web. Proprio come riferimento http://processing.org

Ehi, sono nuovo nell'elaborazione, lo sto usando per creare un sito Web senza flash, quindi sto praticamente disegnando su una tela.

Sto riscontrando un problema con la posizione del mouse, sebbene le coordinate, durante il disegno, considerino l'angolo in alto a sinistra in posizione 0,0; le coordinate del mouse effettive considerano 0,0 come l'angolo in alto a sinistra della finestra del browser.

Quindi il mio problema è questo, l'area di disegno funziona su una pagina web centrata, ogni volta che il browser cambia dimensione, così come le coordinate del mouse all'interno dell'area di disegno.

Esiste un modo per rendere le coordinate del mouse relative all'area di disegno? In modo che io possa cambiare la dimensione della mia finestra del browser e l'angolo in alto a sinistra sarà sempre 0,0 per le coordinate del mouse?

Quindi questo è il problema, non so quanti ppl qui in StackOverflow hanno sperimentato questo, ma spero che qualcuno possa aiutarmi :)

grazie in anticipo alla comunità di overflow dello stack.

Answer 1

Non ho familiarità con l'elaborazione, ma non puoi semplicemente calcolare la differenza tra l'angolo in alto a sinistra della finestra del browser e l'angolo in alto a sinistra dell'area di disegno?
cioè (usando jquery)

$(window).onresize = function() {
 //offset return position realive to the document.
 var offset = $('#canvas').offset();
 window.canvasLeft = offset.left;
 window.canvasTop = offset.top;
}

Quindi puoi fare qualcosa del tipo:

 relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;

Dovresti sostituire #canvas con un selettore css per la tua area di disegno.

Nota anche che window è l'oggetto globale, lo uso qui per gestire possibili problemi di ambito.

Answer 2

L'elaborazione in realtà non è pensata per la creazione di pagine Web. È peggiore di Flash per i siti (l'elaborazione degli schizzi è applet Java - Java è meno comune, molto più dispendioso in termini di risorse e lento da caricare .. )

Detto questo, c'è processing.js , una porta Javascript di elaborazione.

esempio di serpente accede al mouse. Dato che è Javascript e la tela è un div , le coordinate dovrebbero essere un po 'più sane di Java (che vive nel suo mondo di macchine virtuali), ma potrei sbagliarmi ..

Answer 3

È possibile chiedere all'utente di calibrare il sistema prima dell'uso. Non è una risposta completa alla domanda, ma un solletico al problema.

Disegna semplicemente un punto rosso al centro dello schermo, in alto a sinistra e in basso a destra. Chiedere all'utente di fare clic su di essi e recuperare le coordinate. Quindi, sai dove sono gli angoli dello schermo.