Obtener la distancia entre dos puntos en el lienzo

100

Tengo una pestaña de dibujo de lienzo y quiero que lineWidth se base en la distancia entre las dos últimas actualizaciones de coordenadas de mousemove. Yo mismo haré la traducción de la distancia al ancho, solo necesito saber cómo obtener la distancia entre esos puntos (ya tengo las coordenadas de esos puntos).

javascript canvas Anagmate
fuente

Respuestas:

208

Puedes hacerlo con el teorema de Pitágoras.

Si tiene dos puntos (x1, y1) y (x2, y2), entonces puede calcular la diferencia en x y la diferencia en y, llamémoslos ay b.

ingrese la descripción de la imagen aquí

var a = x1 - x2;
var b = y1 - y2;

var c = Math.sqrt( a*a + b*b );

// c is the distance
Igor Šarčević
fuente
9
puede acortar var c = Math.sqrt (a a + b b); a var c = Math.hypot (a, b);
evgpisarchik
2
a ^ 2 + b ^ 2 = c ^ 2 Ecuación de hipoteno
Kad
¿Hay alguna diferencia si vas x1 - x2, y1 - y2o x2 - x1, y2 - y1?
Ramzan Chasygov
1
@RamzanChasygov ¡No hay diferencia en este caso porque cada valor está al cuadrado! Entonces, si el orden fue como 7 - 5 = 2o 5 - 7 = -2no importará. -2 * -2 = 4 2 * 2 = 4
rdmurphy
166

Tenga en cuenta que Math.hypotes parte del estándar ES2015. También hay un buen polyfill en el documento MDN para esta función.

Así que conseguir la distancia se vuelve tan fácil como Math.hypot(x2-x1, y2-y1).

David Gee
fuente
1

¡La distancia entre dos coordenadas xey! x1 e y1 es el primer punto / posición, x2 e y2 es el segundo punto / posición.

function diff (num1, num2) {
  if (num1 > num2) {
    return (num1 - num2);
  } else {
    return (num2 - num1);
  }
};

function dist (x1, y1, x2, y2) {
  var deltaX = diff(x1, x2);
  var deltaY = diff(y1, y2);
  var dist = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
  return (dist);
};
Expandir fragmento

Daniel
fuente
Deberías usar en Math.abslugar de diff.
Moshe Simantov
3
No es necesario utilizarlo, diffya que elevar un número al cuadrado siempre dará como resultado un número positivo. Si x1 - y1es negativo, (x1 - y1) ^ 2sigue siendo positivo.
Programas Redwolf
0

Tiendo a usar mucho este cálculo en las cosas que hago, así que me gusta agregarlo al objeto Math:

Math.dist=function(x1,y1,x2,y2){ 
  if(!x2) x2=0; 
  if(!y2) y2=0;
  return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); 
}
Math.dist(0,0, 3,4); //the output will be 5
Math.dist(1,1, 4,5); //the output will be 5
Math.dist(3,4); //the output will be 5

Actualizar:

este enfoque es especialmente feliz cuando terminas en situaciones similares a esto (a menudo lo hago):

varName.dist=Math.sqrt( ( (varName.paramX-varX)/2-cx )*( (varName.paramX-varX)/2-cx ) + ( (varName.paramY-varY)/2-cy )*( (varName.paramY-varY)/2-cy ) );

esa cosa horrible se vuelve mucho más manejable:

varName.dist=Math.dist((varName.paramX-varX)/2, (varName.paramY-varY)/2, cx, cy);
jaya
fuente