Pregunta

éste parece ser un problema sencillo. Tengo una aplicación de lona que estoy escribiendo usando Processing.js y quiero que aparezca en el fondo de una página web. Para lograr esto tengo el siguiente CSS:

#canvas-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

Cuando la lona de devolución es el id de un div que contiene el lienzo real. El propio lienzo se fija para tener la anchura y la altura del elemento de cuerpo HTML. Esto hace correctamente para mí (la lona en el fondo, debajo de mi contenido HTML) pero ya no puede capturar las variables mouseX y mouseY (lo Processing.js usos para obtener las coordenadas del ratón).

¿Cómo puedo solucionar este problema? ¿Es una cuestión de diferentes css o hay otra manera de obtener las coordenadas del ratón en Processing.js? Gracias.

¿Fue útil?

Solución

pensé que había puesto mi solución por si alguien tiene el mismo problema. Desde que estaba usando jQuery que siguió adelante y establecer nuevas variables jmouseX y jmouseY, a la posición del ratón.

jQuery(document).ready(function(){
    $(document).mousemove(function(e){
        jmouseX = e.pageX;
        jmouseY = e.pageY;
    }); 
})

A continuación, cada vez que necesito mouseX o mouseY en mis processingjs APP sólo tiene que utilizar jmouseX y jmouseY.

Otros consejos

Bueno, ya que cambiar el índice z a -1 y su cuerpo tiene auto z-index, que se puede considerar como 0 en este caso, usted no será capaz de registrar los clics en el lienzo, ya que es bajo el cuerpo. El cuerpo obtiene todos los clics y así sucesivamente. Hay que dar de alta sus eventos de ratón en el cuerpo mismo en este caso.

Si usted tiene que conseguir clics en el lienzo, esto lo único que puedo sugerir es hacer que sea z-index = 1 y que sea totalmente transparente. Pero en ese caso, usted no será capaz de hacer clic en los elementos que están en el cuerpo, como botones, enlaces y cuadros de texto. De lo contrario, tendrá que eventos de captura en el cuerpo y enviar manualmente los COORDINATS en la biblioteca que está utilizando.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top