キャンバスの2点間の距離を取得する

100

キャンバス描画タブがあり、2つの最後のマウスムーブ座標更新間の距離に基づいてlineWidthを設定します。私は自分で距離を幅に変換します。これらのポイント間の距離を取得する方法を知っている必要があります（これらのポイントの座標はすでにあります）。

javascript canvas

— アナグメイト
ソース

208

あなたはピタゴラスの定理でそれを行うことができます

2つのポイント（x1、y1）と（x2、y2）がある場合、xの差とyの差を計算できます。それらをaとbと呼びます。

ここに画像の説明を入力してください

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

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

// c is the distance

— イゴール・チャルシェヴィッチ
ソース

9

var c = Math.sqrt（a a + b b）; を短縮できます。to var c = Math.hypot（a、b）;

— evgpisarchik 2017年

2

a ^ 2 + b ^ 2 = c ^ 2 Hypotenus方程式

— Kad

行くx1 - x2, y1 - y2か何か違いはありますかx2 - x1, y2 - y1？

— Ramzan Chasygov

1

@RamzanChasygov各値が2乗されるため、この場合に違いはありません。だから、順序は次のようであったかどうか7 - 5 = 2か5 - 7 = -2は問題ではありません。-2 * -2 = 4 2 * 2 = 4

— rdmurphy

166

注Math.hypotES2015標準の一部です。この機能については、MDNドキュメントにも適切なポリフィルがあります。

したがって、距離を取得するのは簡単Math.hypot(x2-x1, y2-y1)です。

— デビッドジー
ソース

26

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

座標がある場合は、数式を使用して距離を計算します。

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

プラットフォームが**operatorをサポートしている場合は、代わりにそれを使用できます。

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

— ekstrakt
ソース

1

2つの座標xとyの間の距離！x1とy1は最初の点/位置、x2とy2は2番目の点/位置です！

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

スニペットを展開

— ダニエル
ソース

のMath.abs代わりに使用する必要がありますdiff。

— Moshe Simantov

3

diff数を二乗すると常に正の数になるので、使用する必要はありません。x1 - y1が負の場合、(x1 - y1) ^ 2まだ正です。

— Redwolfプログラム

0

私はこの計算を私が作成するもので多く使用する傾向があるので、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

更新：

このアプローチは、これに似た状況に陥ったときに特に喜んでいます（私はしばしばそうします）。

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

その恐ろしいことがはるかに扱いやすくなります：

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

— ジャヤ
ソース