Posiciones absolutas del mouse sobre el procesamiento

Question

Esta es una copia y pego de una publicación que hice en el foro de procesamiento (donde no tengo una respuesta hasta ahora) pensé que podría intentarlo aquí.

El procesamiento es una forma genial de dibujar cosas, especialmente para las páginas web. Solo como referencia http://processing.org

Hola, soy nuevo en el procesamiento, lo estoy usando para hacer un sitio web sin flash, así que estoy dibujando en un lienzo.

Tengo un problema con la posición del mouse, aunque las coordenadas, al dibujar, consideran que la esquina superior izquierda es la posición 0,0; las coordenadas reales del mouse consideran que 0,0 es la esquina superior izquierda de la ventana del navegador.

Entonces, mi problema es este, el lienzo está operando en una página web centrada, cada vez que el navegador cambia de tamaño, también lo hacen las coordenadas del mouse dentro del lienzo.

¿Hay alguna forma de hacer que las coordenadas del mouse sean relativas al lienzo? ¿Para poder cambiar el tamaño de la ventana de mi navegador y la esquina superior izquierda siempre será 0,0 para las coordenadas del mouse?

Entonces, ese es el problema, no sé cuántas personas aquí en stackoverflow tienen experiencia con esto, pero espero que alguien pueda ayudarme :)

gracias de antemano a la comunidad de desbordamiento de pila.

Answer 1

No estoy familiarizado con el procesamiento, pero ¿no puedes calcular la diferencia entre la esquina superior izquierda de la ventana del navegador y la esquina superior izquierda del lienzo?
es decir (usando jquery)

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

Entonces puedes hacer algo como:

 relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;

Debe reemplazar #canvas con un selector css para su área de lienzo.

También tenga en cuenta que la ventana es el objeto global, lo uso aquí para tratar posibles problemas de alcance.

Answer 2

El procesamiento realmente no está destinado a crear páginas web ... Es peor que Flash para sitios (el procesamiento de bocetos son applets de Java; Java es menos común, requiere mucho más recursos y es más lento de cargar ... )

Dicho esto, hay processing.js , un puerto Javascript de procesamiento.

El ejemplo de serpiente accede al mouse. Como es Javascript, y el lienzo es un div , las coordenadas deberían ser un poco más sensatas que Java (que vive en su propio mundo VM), pero podría estar equivocado ...

Answer 3

Puede pedirle al usuario que calibre el sistema antes de usarlo. No es completamente una respuesta a la pregunta, sino una solución al problema.

Simplemente dibuje un punto rojo en el centro de la pantalla, arriba a la izquierda y abajo a la derecha. Pídale al usuario que haga clic en ellos y recupere las coordenadas. Entonces, sabes dónde están las esquinas de la pantalla.