web-dev-qa-db-fra.com

Obtenir la distance entre deux points dans la toile

J'ai un onglet de dessin sur toile et je veux que lineWidth soit basé sur la distance entre les deux dernières mises à jour des coordonnées de mousemove. Je vais faire la traduction de distance en largeur moi-même, j'ai juste besoin de savoir comment obtenir la distance entre ces points (j'ai déjà les coordonnées de ces points).

javascriptcanvas
79
Anagmate

Vous pouvez le faire avec le théorème de Pythagore

Si vous avez deux points (x1, y1) et (x2, y2), vous pouvez calculer la différence de x et la différence de y, appelons-les a et b.

enter image description here

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

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

// c is the distance
170
Igor Šarčević

Notez que Math.hypot Fait partie de la norme ES2015. Il y a aussi un bon polyfill sur le doc MDN pour cette fonctionnalité.

Donc, obtenir la distance devient aussi facile que Math.hypot(x2-x1, y2-y1).

123
David Gee

http://en.wikipedia.org/wiki/Euclidean_distance

Si vous avez les coordonnées, utilisez la formule pour calculer la distance:

var dist = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );

Si votre plate-forme supporte le ** opérateur , vous pouvez utiliser ce qui suit:

const dist = Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
22
ekstrakt

La distance entre deux coordonnées x et y! x1 et y1 est le premier point/position, x2 et y2 est le deuxième point/position!

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);
};
1
Daniel

j'ai tendance à utiliser ce calcul beaucoup dans les choses que je fais, alors j'aime bien l'ajouter à l'objet 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

Mise à jour:

cette approche est particulièrement heureuse lorsque vous vous retrouvez dans des situations similaires (je le fais souvent):

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

cette chose horrible devient beaucoup plus gérable:

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