Obtenha distância entre dois pontos na tela

100

Eu tenho a guia de desenho da tela e quero que a largura de linha seja baseada na distância entre as duas últimas atualizações de coordenadas do mousemove. Eu mesmo farei a translação da distância para a largura, só preciso saber como obter a distância entre esses pontos (já tenho as coordenadas desses pontos).

javascript canvas Anagmato
fonte

Respostas:

208

Você pode fazer isso com o teorema de Pitágoras

Se você tem dois pontos (x1, y1) e (x2, y2), então você pode calcular a diferença em xe a diferença em y, vamos chamá-los de ae b.

insira a descrição da imagem aqui

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

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

// c is the distance
Igor Šarčević
fonte
9
você pode encurtar var c = Math.sqrt (a a + b b); para var c = Math.hypot (a, b);
evgpisarchik
2
a ^ 2 + b ^ 2 = c ^ 2 Equação de hipoteno
Kad de
Faz alguma diferença se você vai x1 - x2, y1 - y2ou x2 - x1, y2 - y1?
Ramzan Chasygov
1
@RamzanChasygov Não há diferença neste caso porque cada valor é elevado ao quadrado! Portanto, se o pedido foi igual 7 - 5 = 2ou 5 - 7 = -2não, importa. -2 * -2 = 4 2 * 2 = 4
rdmurphy
166

Note-se que Math.hypoté parte do padrão ES2015. Também há um bom polyfill no documento MDN para esse recurso.

Portanto, obter a distância torna-se tão fácil quanto Math.hypot(x2-x1, y2-y1).

David Gee
fonte
1

A distância entre duas coordenadas x e y! x1 e y1 são o primeiro ponto / posição, x2 e y2 são o segundo ponto / posição!

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 trecho

Daniel
fonte
Você deve usar em Math.absvez de diff.
Moshe Simantov
3
Você não precisa usar diffcomo quadrado um número sempre resultará em um número positivo. Se x1 - y1for negativo, (x1 - y1) ^ 2ainda é positivo.
Programas Redwolf de
0

Eu costumo usar esse cálculo muito nas coisas que faço, então gosto de adicioná-lo ao 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

Atualizar:

essa abordagem é especialmente feliz quando você acaba em situações semelhantes a esta (eu costumo fazer isso com frequência):

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

aquela coisa horrível se torna muito mais administrável:

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