Dapatkan jarak antara dua titik di kanvas

100

Saya memiliki tab gambar kanvas dan ingin lineWidth didasarkan pada jarak antara dua pembaruan koordinat gerakan mouse terakhir. Saya akan menerjemahkan jarak menjadi lebar sendiri, saya hanya perlu tahu bagaimana cara mendapatkan jarak antara titik-titik itu (saya sudah memiliki koordinat titik-titik itu).

javascript canvas Anagmate
sumber

Jawaban:

208

Anda dapat melakukannya dengan teorema pythagoras

Jika Anda memiliki dua titik (x1, y1) dan (x2, y2) maka Anda dapat menghitung selisih x dan selisih y, sebut saja a dan b.

masukkan deskripsi gambar di sini

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

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

// c is the distance
Igor Šarčević
sumber
9
Anda dapat mempersingkat var c = Math.sqrt (a a + b b); ke var c = Math.hypot (a, b);
evgpisarchik
2
a ^ 2 + b ^ 2 = c ^ 2 Persamaan hipotenus
Kad
Apakah ada bedanya jika Anda pergi x1 - x2, y1 - y2atau x2 - x1, y2 - y1?
Ramzan Chasygov
1
@RamzanChasygov Tidak ada perbedaan dalam kasus ini karena setiap nilai dikuadratkan! Jadi apakah urutannya suka 7 - 5 = 2atau 5 - 7 = -2tidak masalah. -2 * -2 = 4 2 * 2 = 4
rdmurphy
166

Perhatikan bahwa itu Math.hypotadalah bagian dari standar ES2015. Ada juga polyfill yang bagus di dokumen MDN untuk fitur ini.

Jadi mendapatkan jarak menjadi semudah Math.hypot(x2-x1, y2-y1).

David Gee
sumber
1

Jarak antara dua koordinat x dan y! x1 dan y1 adalah titik / posisi pertama, x2 dan y2 adalah titik / posisi kedua!

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

Daniel
sumber
Anda harus menggunakan Math.absbukan diff.
Moshe Simantov
3
Anda tidak perlu menggunakan diffkarena mengkuadratkan angka akan selalu menghasilkan angka positif. Jika x1 - y1negatif, (x1 - y1) ^ 2masih positif.
Program Redwolf
0

Saya cenderung menggunakan perhitungan ini banyak dalam hal-hal yang saya buat, jadi saya ingin menambahkannya ke objek Matematika:

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

Memperbarui:

pendekatan ini sangat membahagiakan ketika Anda berakhir dalam situasi yang mirip dengan ini (saya sering melakukannya):

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

hal mengerikan itu menjadi jauh lebih bisa dikelola:

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