[JS] 두 점 사이의 거리 계산하기

요소 내부의 고정된 지점과 마우스 클릭 지점 사이의 거리를 계산해야 하는 경우가 종종 있다. 예를 들어 사용자 경험(UX) 개선을 위해 버튼 클릭 감지 영역을 실제보다 더 넓게 설정할 때(클릭하기 쉽도록 하기 위해) 이런 계산이 필요하다.

 

 

이때 두 지점 간의 거리는 피타고라스 정리를 이용해서 구할 수 있다. 피타고라스 정리는 직각삼각형에서 빗변(가장 긴 변)의 제곱은 다른 두 변의 제곱의 합과 같다는 원리다.

$$c^2 = a^2 + b^2$$

 

빗변 $c$의 길이를 구하기 위해 양변에 제곱근(루트; square root)을 적용하여 다음과 같이 표현할 수도 있다.

$$c = \sqrt{a^2+b^2}$$

 

한편, 피타고라스의 원리를 적용하기 위해 좌표평면(서로 수직으로 교차하는 두 직선으로 이루어진 평면)에서 두 점을 기준으로 가상의 직각삼각형을 만들 수 있다. 고정된 지점 $(x_1,y_1)$과 마우스 클릭 지점 $(x_2,y_2)$은 직각삼각형의 빗변을 이루고, 나머지 가상의 꼭짓점은 $(x_2,y_1)$ 또는 $(x_1,y_2)$ 좌표에 위치하게 된다.

 

 

위 원리를 이용하면 마우스 클릭 지점과 특정 지점 사이의 거리가 허용 범위 안에 들어오는지 확인하는 함수를 만들 수 있다. 특정 요소의 원점(0, 0)을 기준으로 클릭 지점의 좌표 계산하는 방법은 이전 포스팅 참고.

const isColliding = (point: Point, mouse: Point): boolean => {
  // 피타고라스 정리를 이용해 point와 mouse 사이의 거리(빗변) 계산
  // mouse.x 또는 mouse.y는 요소를 기준으로 한 좌표 (e.clientX/Y - rect.left/top)
  const dx = point.x - mouse.x;
  const dy = point.y - mouse.y;
  const distance = Math.sqrt(dx ** 2 + dy ** 2);
  // 클릭 판정 영역을 넓게 설정하여 선택하기 쉽도록 조정
  return distance < STYLE.BASE_POINT_RADIUS * 2.5;
};