[jquery] offset

화면에 어떤 객체를 랜덤의 좌표로 만들어 주었을 때 두 곳의 거리를 구하려면 흔히 피타고라스의 정리로 구하면 된다고 알고 있다.

그것을 구현하려면, 각 객체의 좌표(스타일에서 left, top 값)를 알아야 X,Y로 지정을 해주고 피타고라스정리로 구할 수 있다.

그런데 그 값을 가져오려면 그 객체의 스타일에 접근 해야하는데, document.getElementById(객체)style.left 이런 식으로 불러 올 수는 있다. 근데 이값은 '111px' 이런식으로 string 값으로 불러오는데다가 px까지 붙어서 나오기 때문에 피타고라스 정리로 계산하려면 까다롭다. 그 대신 쓸 수 있는게 있는데, offset이라는 jquery 메서드이다. 객체를 불러와서 뒤에 offset() 만 붙여주면 top과 left 값을 '숫자' 로 들고오는 객체를 생성한다. 그러면 변수 = 객체.offset(); 이렇게 저장해서 변수.left 이런 식으로 쉽게 left 와 top값에 접근해서 계산 또한 쉽게 할 수 있다. 좋은 기능인듯하다.

      var prevOffset = window.dancers[i].offset();

      var currOffset = dancer.$node.offset();

      disX = prevOffset.left - currOffset.left;

      disY = prevOffset.top - currOffset.top;

      disDancer = Math.sqrt(disX**2 + disY**2);

코드의 중간부분을 들고 온 것인데, window.dancers[i]와 dancer.$node가 각 객체이다. 그래서 offset()을 통해 left와 top값을 갖고와서 피타고라스 정리로 각 지점간 거리인 disDancer 를 쉽게 구할 수 있다.