medir distancia de dos puntos en una imagen

Montes28 · #1 (**permalink**) 10/08/2012, 22:02

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

Montes28 · #2 (**permalink**) 10/08/2012, 22:37

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<html>
<head>
<title>jQuery Cursor</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(document).mousemove(function(e){
            $('#posicion_cursor').html("Pos x : " + e.pageX + " | Pos y : " + e.pageY);
    });
});
</script>
</head>
<body>
<div id="posicion_cursor"></div>
</body>
</html>

gebremswar · #3 (**permalink**) 12/08/2012, 06:34

Hola Montes28, que tal.

Preparé un ejemplo:

Código Javascript:

Ver original<html>
<head>
<meta charset="utf-8">
<title>@GBreagan - coordenadas</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(document).mousemove(function(e){
        $('#posicion_cursor').html("Pos x : " + e.pageX + " | Pos y : " + e.pageY);
    });
    var s = false; //evalúa los click's
    // COORDENADAS: puntos (iX,iB) y (fX,fY)
    var iX = 0; var iB = 0; var fX = 0; var fY = 0;
    
    $('html').on({
        click:function(e){
            if (!s) { // ...evalúo primer click
                iX=e.pageX;
                iY=e.pageY;
                s = true; // ¡primer click ejecutado!
            } else if(s) { // ...evalúo segundo click
                fX=e.pageX;
                fY=e.pageY;
                s = false;// ¡segundo click ejecutado!
                var d = pitagoras(iX,iY,fX,fY);//llamo a mi función que está más abajo
                alert(d);//resultado - la distancia es:
            }
        }
    })
    function pitagoras(iX,iY,fX,fY){
        //un poco de algebra analítica para hallar la distancia no dirigida
        return r = Math.sqrt((Math.pow((iX-fX),2))+(Math.pow((iY-fY),2)));
    }
});
</script>
</head>
<body>
<div id="posicion_cursor" style="position:fixed"></div>
</body>
</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.

Montes28 · #4 (**permalink**) 12/08/2012, 09:57

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 ?

gebremswar · #5 (**permalink**) 13/08/2012, 05:51

Cita:

Iniciado por Montes28

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:

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.
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.
Busca info sobre el elemento line (te puede ser util).
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 )
Finalmente, comentarnos tu progreso e implementación a modo de feedback.