Autor Tema: [Aporte] Coordenadas cartesianas [mousemove] - jQuery  (Leído 1184 veces)

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
[Aporte] Coordenadas cartesianas [mousemove] - jQuery
« en: 16 de Marzo de 2012, 06:53:06 am »
Este sistema basado en la regla de tres aplicado en matemáticas lo desarrolle hace unas horas para un trabajo que ustedes aun no conocen pero que me he preocupado en dejarles inicios en distintas partes del foro.

Todo empieza a partir del centro de la pagina en donde se asociaran los limites de ancho y alto del área con un rango en pixeles.

El uso que le di a esto fue lograr mover el fondo de la pagina al contrario de la posición del cursor para darle un toque de dinamismo al sitio web.

Algunas personas que lograron ver el código en acción mientras lo desarrollaba fueron Franklin y Kevin.
Aquí les dejo la base de todo:
Código: [Seleccionar]
var rango = 25;
 var x = Math.round((e.pageX*rango/$(document).width())-(rango/2));
 var y = Math.round(-(e.pageY*rango/$(document).height())+(rango/2));

Rango vendría siendo el área como tal que queremos desplazar, en nuestro caso serian 25px que es igual a -x=12,5; x=12,5; -y=12,5; y=12,5, pero, como estamos redondeando los números para evitar los decimales con Math.round, serian 12 de cada coordenada en vez de los 12,5 iniciales ¿Me explique con claridad?

El punto 0,0 vendría siendo el centro de la pantalla.
Un ejemplo:
Código: [Seleccionar]
$(document).ready(function(){
  $(this).mousemove(function(e){
       var rango = 25;
       var x = Math.round((e.pageX*rango/$(document).width())-(rango/2));
       var y = Math.round(-(e.pageY*rango/$(document).height())+(rango/2));
       $('body').html('X = ' + x + ' | Y = ' + y);
  });
});

Saludos.
« Última modificación: 16 de Marzo de 2012, 18:14:14 pm por SoyJoaquin. »
Twitter: @JoakoM010



Comunidad PHPeros

[Aporte] Coordenadas cartesianas [mousemove] - jQuery
« en: 16 de Marzo de 2012, 06:53:06 am »

Desconectado Physlet

  • PHPero Experto
  • *****
  • Mensajes: 822
  • Karma: 41
  • Sexo: Masculino
  • Todo es posible con esfuerzo, dedicación e interés
    • Ver Perfil
    • PanamaDev
Re:[Aporte] Coordenadas cartesianas [mousemove] - jQuery
« Respuesta #1 en: 16 de Marzo de 2012, 18:10:03 pm »
Cada vez que muevo el mouse más a la derecha, X disminuye.

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:[Aporte] Coordenadas cartesianas [mousemove] - jQuery
« Respuesta #2 en: 16 de Marzo de 2012, 18:13:39 pm »
Cada vez que muevo el mouse más a la derecha, X disminuye.

Si supieras que no lo había notado, gracias Physlet.
Entonces seria algo así:
Código: [Seleccionar]
   var x = Math.round((e.pageX*rango/$(document).width())-(rango/2));
   var y = Math.round(-(e.pageY*rango/$(document).height())+(rango/2));
Saludos.

Edito: Otra función que le puedo llegar a dar a esto es en el mapa de IsoMap, Que al mover el cursor a los bordes del área se vaya corriendo el campo visual de la misma si llega a ser el caso de que el mapa fuera mas grande que lo que se pueda mostrar.
« Última modificación: 16 de Marzo de 2012, 18:18:42 pm por SoyJoaquin. »
Twitter: @JoakoM010



Desconectado nmartin021

  • PHPero Avanzado
  • ****
  • Mensajes: 250
  • Karma: 9
    • Ver Perfil
Re:[Aporte] Coordenadas cartesianas [mousemove] - jQuery
« Respuesta #3 en: 26 de Marzo de 2012, 08:28:33 am »
Muy bueno, son 2 líneas pero están muy bien pensadas.

K+

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:[Aporte] Coordenadas cartesianas [mousemove] - jQuery
« Respuesta #4 en: 22 de Abril de 2012, 03:14:51 am »
He seguido jugando últimamente con este sistema para poder establecer que el punto 0,0 sea el punto de click y que al moverlo se vaya creando el campo de coordenadas.

Hice esto pero no veo que funcione "muy bien" que digamos, creo que la formula que estoy planteando no es la correcta y temo equivocarme en este aspecto ya que literalmente es la base del código.

Código: [Seleccionar]
$(document).ready(function(){
var press; var pX; var pY;
$(this).mousedown(function(a){
press = true; pX = a.pageX; pY = a.pageY;
}).mouseup(function(a){
press = false;
}).mousemove(function(b){
if(press){
var rango = 20;
var x = Math.round((b.pageX*rango/pX)-(rango));
var y = Math.round(-(b.pageY*rango/pY)+(rango));
$('body').html('X = ' + x + ' | Y = ' + y);
}
});
});

Con esto se podría llegar a crear algo similar a un efecto "drag" o como por ejemplo, imagínense un mapa, al presionar en X punto y arrastrarlo se moverá a su posición negativa. Seria literalmente el mismo funcionamiento que tienen los SO en pantallas táctiles al mover un listado (Si mueves el dedo hacia arriba, se ira bajando la lista).

Saludos.
Twitter: @JoakoM010