캔버스에서 두 지점 사이의 거리 얻기

캔버스 그리기 탭이 있고 lineWidth가 마지막 두 개의 mousemove 좌표 업데이트 사이의 거리를 기반으로하기를 원합니다. 거리를 너비로 직접 변환 할 것입니다.이 점들 사이의 거리를 얻는 방법을 알아야합니다 (이미 해당 점의 좌표가 있습니다).

피타고라스 정리로 할 수 있습니다.

두 개의 점 (x1, y1)과 (x2, y2)가 있다면 x의 차이와 y의 차이를 계산할 수 있습니다.

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

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

// c is the distance

참고 Math.hypotES2015 표준의 일부입니다. 이 기능 에 대한 MDN 문서 에는 좋은 polyfill도 있습니다.

따라서 거리를 얻는 것은 Math.hypot(x2-x1, y2-y1).

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

두 좌표 x와 y 사이의 거리! x1 및 y1은 첫 번째 점 / 위치이고 x2 및 y2는 두 번째 점 / 위치입니다!

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 개체에 추가하고 싶습니다.

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