Nhận khoảng cách giữa hai điểm trong canvas

100

Tôi có tab vẽ canvas và muốn lineWidth dựa trên khoảng cách giữa hai lần cập nhật tọa độ di chuyển chuột cuối cùng. Tôi sẽ tự dịch khoảng cách thành chiều rộng, tôi chỉ cần biết cách tính khoảng cách giữa các điểm đó (tôi đã có tọa độ của các điểm đó).

javascript canvas

— Anagmate
nguồn

208

Bạn có thể làm điều đó với định lý pythagoras

Nếu bạn có hai điểm (x1, y1) và (x2, y2) thì bạn có thể tính hiệu số x và hiệu số y, gọi chúng là a và b.

nhập mô tả hình ảnh ở đây

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

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

// c is the distance

— Igor Šarčević
nguồn

9

bạn có thể rút gọn var c = Math.sqrt (a a + b b); thành var c = Math.hypot (a, b);

— evgpisarchik

2

a ^ 2 + b ^ 2 = c ^ 2 Phương trình Hypotenus

— Kad

Có khác biệt gì không nếu bạn đi x1 - x2, y1 - y2hoặc x2 - x1, y2 - y1?

— Ramzan Chasygov

1

@RamzanChasygov Không có sự khác biệt trong trường hợp này vì mỗi giá trị là bình phương! Vì vậy, cho dù thứ tự giống 7 - 5 = 2hay 5 - 7 = -2không quan trọng. -2 * -2 = 4 2 * 2 = 4

— rdmurphy

166

Lưu ý rằng đó Math.hypotlà một phần của tiêu chuẩn ES2015. Ngoài ra còn có một polyfill tốt trên tài liệu MDN cho tính năng này.

Vì vậy, nhận được khoảng cách trở nên dễ dàng như Math.hypot(x2-x1, y2-y1).

— David Gee
nguồn

26

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

Nếu bạn có tọa độ, hãy sử dụng công thức để tính khoảng cách:

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

Nếu nền tảng của bạn hỗ trợ **nhà điều hành , thay vào đó bạn có thể sử dụng:

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

— ekstrakt
nguồn

1

Khoảng cách giữa hai tọa độ x và y! x1 và y1 là điểm / vị trí đầu tiên, x2 và y2 là điểm / vị trí thứ hai!

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

Mở rộng đoạn mã

— Daniel
nguồn

Bạn nên sử dụng Math.absthay vì diff.

— Moshe Simantov

3

Bạn không cần phải sử dụng diffvì bình phương một số sẽ luôn dẫn đến một số dương. Nếu x1 - y1là tiêu cực, (x1 - y1) ^ 2là tích cực vẫn còn.

— Chương trình Người sói

0

tôi có xu hướng sử dụng phép tính này rất nhiều trong những việc tôi làm, vì vậy tôi muốn thêm nó vào đối tượng 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

Cập nhật:

cách tiếp cận này đặc biệt vui khi bạn rơi vào những tình huống tương tự như thế này (tôi thường làm):

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

thứ khủng khiếp đó trở nên dễ quản lý hơn nhiều:

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

— jaya
nguồn