Obtenir la distance entre deux points dans le canevas

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).

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.

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

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

// c is the distance

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).

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

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

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