Obtenir la distance entre deux points dans le canevas

100

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

javascript canvas

— Anagmate
source

208

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

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

entrez la description de l'image ici

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

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

// c is the distance

— Igor Šarčević
source

9

vous pouvez raccourcir var c = Math.sqrt (a a + b b); à var c = Math.hypot (a, b);

— evgpisarchik

2

a ^ 2 + b ^ 2 = c ^ 2 Équation d'Hypoténus

— Kad

Y a-t-il une différence si vous y allez x1 - x2, y1 - y2ou x2 - x1, y2 - y1?

— Ramzan Chasygov le

1

@RamzanChasygov Il n'y a pas de différence dans ce cas car chaque valeur est au carré! Donc, que l'ordre soit 7 - 5 = 2ou 5 - 7 = -2n'a pas d'importance. -2 * -2 = 4 2 * 2 = 4

— rdmurphy

166

Notez que cela Math.hypotfait partie de la norme ES2015. Il existe également un bon polyfill sur la documentation MDN pour cette fonctionnalité.

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

— David Gee
source

26

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 plateforme prend en charge l' **opérateur , vous pouvez à la place utiliser cela:

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

— ekstrakt
source

1

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

Développer l'extrait

— Daniel
source

Vous devriez utiliser à la Math.absplace de diff.

— Moshe Simantov

3

Vous n'avez pas besoin d'utiliser diffcomme quadrillage un nombre se traduira toujours par un nombre positif. Si x1 - y1est négatif, (x1 - y1) ^ 2est toujours positif.

— Programmes Redwolf

0

J'ai tendance à utiliser beaucoup ce calcul dans les choses que je fais, donc j'aime 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

Mettre à 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);

— jaya
source