Foros del Web » Programando para Internet » Jquery »

medir distancia de dos puntos en una imagen

Estas en el tema de medir distancia de dos puntos en una imagen en el foro de Jquery en Foros del Web. hola amigos espero me puedan ayudar la situacion es la siguiente tengo una imagen y necesito medir la distancia que exista entre dos puntos en ...
  #1 (permalink)  
Antiguo 10/08/2012, 22:02
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 5 meses
Puntos: 6
medir distancia de dos puntos en una imagen

hola amigos espero me puedan ayudar la situacion es la siguiente

tengo una imagen y necesito medir la distancia que exista entre dos puntos en la imagen en pixeles, la idea es que al dar click sobre un punto y despues sobre el otro punto se pueda visualizar la distancia

es posible realizar esto , me pueden dar ideas

gracias
  #2 (permalink)  
Antiguo 10/08/2012, 22:37
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 5 meses
Puntos: 6
Respuesta: medir distancia de dos puntos en una imagen

amigos hasta el momento obtengo las coordenadas del puntero del ratón, y creo que el paso siguiente que al dar click se almacene ese valor en una variable y cuando se de click de nuevo se almacene en otra y asi retornar un resultado y mostrarlo en pantalla

estoy perdido?

Código HTML:
Ver original
  1. <title>jQuery Cursor</title>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5.     $(document).mousemove(function(e){
  6.             $('#posicion_cursor').html("Pos x : " + e.pageX + " | Pos y : " + e.pageY);
  7.     });
  8. });
  9. </head>
  10. <div id="posicion_cursor"></div>
  11. </body>
  12. </html>
  #3 (permalink)  
Antiguo 12/08/2012, 06:34
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 1 mes
Puntos: 57
Información Respuesta: medir distancia de dos puntos en una imagen

Hola Montes28, que tal.

Preparé un ejemplo:

Código Javascript:
Ver original
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>@GBreagan - coordenadas</title>
  5. <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function() {
  8.     $(document).mousemove(function(e){
  9.         $('#posicion_cursor').html("Pos x : " + e.pageX + " | Pos y : " + e.pageY);
  10.     });
  11.     var s = false; //evalúa los click's
  12.     // COORDENADAS: puntos (iX,iB) y (fX,fY)
  13.     var iX = 0; var iB = 0; var fX = 0; var fY = 0;
  14.    
  15.     $('html').on({
  16.         click:function(e){
  17.             if (!s) { // ...evalúo primer click
  18.                 iX=e.pageX;
  19.                 iY=e.pageY;
  20.                 s = true; // ¡primer click ejecutado!
  21.             } else if(s) { // ...evalúo segundo click
  22.                 fX=e.pageX;
  23.                 fY=e.pageY;
  24.                 s = false;// ¡segundo click ejecutado!
  25.                 var d = pitagoras(iX,iY,fX,fY);//llamo a mi función que está más abajo
  26.                 alert(d);//resultado - la distancia es:
  27.             }
  28.         }
  29.     })
  30.     function pitagoras(iX,iY,fX,fY){
  31.         //un poco de algebra analítica para hallar la distancia no dirigida
  32.         return r = Math.sqrt((Math.pow((iX-fX),2))+(Math.pow((iY-fY),2)));
  33.     }
  34. });
  35. </script>
  36. </head>
  37. <body>
  38. <div id="posicion_cursor" style="position:fixed"></div>
  39. </body>
  40. </html>


Debo decirte que la precisión que usa JavaScript para sus algoritmos de cálculos es notablemente menor en comparación con otros lenguajes de programación.
  • Por ejemplo: 0.119 * 100 mostraria como resultado 11.899999999999999
Un valor en JavaScript tiene 16 dígitos de precisión. Esto parece ser una de las limitaciones para efectuar cálculos matemáticos con JavaScript.

Es por eso que te recomiendo que realices el calculo matemático de la última función (la de pitágoras), una vez obtenido las coordenadas, con algún lenguaje de programación de lado del servidor como puede ser PHP para calcular el valor de la distancia exacta entre ambos puntos.

Quizá sería bueno que nos comentes en que estas pensando implementar esto.

Última edición por gebremswar; 12/08/2012 a las 06:44
  #4 (permalink)  
Antiguo 12/08/2012, 09:57
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 5 meses
Puntos: 6
Respuesta: medir distancia de dos puntos en una imagen

gebremswar gracias por contestar

te comento en que lo pieso implementar:

desde una camaraweb llegan imagenes cada minuto y el usuario requiere medir la distancia entre dos puntos por ahora el usuario abre la imagen con un editor XnView y observa las coordenadas y con esos valores realiza un calculo.
mi idea es que el usuario señale los dos puntos en los cuales quiere medir la distancia.

las medidas se realizan verticalmente.

que me aconsejas ?
  #5 (permalink)  
Antiguo 13/08/2012, 05:51
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 1 mes
Puntos: 57
Información Respuesta: medir distancia de dos puntos en una imagen

Cita:
Iniciado por Montes28 Ver Mensaje
desde una camaraweb llegan imagenes cada minuto y el usuario requiere medir la distancia entre dos puntos por ahora el usuario abre la imagen con un editor XnView y observa las coordenadas y con esos valores realiza un calculo.
mi idea es que el usuario señale los dos puntos en los cuales quiere medir la distancia.

las medidas se realizan verticalmente.

que me aconsejas ?
De acurdo a lo que nos mencionas, te aconsejo lo siguiente:
  1. Modificar el ejemplo que compartí para que en el segundo click (la segunda coordenada) solo se pueda escoger el valor en el eje Y, para que de esta manera facilites la precisión de los puntos a obtener.
  2. Definitivamente necesitas ocupar un lenguaje de programación de lado del servidor, como puede ser PHP, para realizar el cálculo preciso de la distancia entre ambos puntos. Almacenarías los valores obtenidos en un formulario para luego procesarlo y obtener tu resultado.
  3. Busca info sobre el elemento line (te puede ser util).
  4. Un poquito de álgebra, aunque creo que el ejemplo que expuse esta bastante decente (me hiciste recordar un poco la matemática básica que debe estar siempre presente )
  5. Finalmente, comentarnos tu progreso e implementación a modo de feedback.

Etiquetas: algebra, coordenadas, mousemove, pitágoras
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:11.