아침에 면접에서 사각형의 영역에 클릭한 위치에서 원이 커지면서 사각형 영역에 꽉 차게하는 공식에 관한 질문을 받았다.
돌발 질문이기도 하고 수학적인 부분도 들어있어 곧바로 답을하지 못했다.

면접을 끝내고 휴대폰을 만지작 거리면서 곰곰히 생각해보니 대각선의 거리만 잴 수 있으면 할 수 있을거 같았다.

참을 수 없는 호기심에 일어 다른일을 제쳐두고 데모를 만들어보는데 몰두했다.
데모를 위하여 많은 것들을 준비해야하는 과정과 재료들이 많이 필요해서 준비하는데 시간이 꽤 걸리긴 한다. 마우스 이벤트와 원이 커지는 이벤트 만드는데도 대각선 거리를 도출해내야 했다.

Demo

---

mousemove 이벤트가 콜이 가장많아서 최적화에 신경써야 하는 영역이다. 다음은 마우스 이벤트의 행동 시나리오다.

mousedown

• 사각형 영역의 꼭지점 4개의 좌표를 가져온다.
• 마우스 포인터 위치를 저장해둔다.
• 마우스 포인터 위치에 원을 이동한다.
• 마우스 위치와 사각형 꼭지점 4개의 거리를 계산하고 4개중에 가장 큰 수를 뽑아낸다. (가장 먼 꼭지점이라는 의미다.)

mousemove

• mousedown 이벤트때 저장해둔 마우스 포인터 위치와 현재의 마우스 포인터 좌표로 거리를 계산한다.
• 계산한 거리로 원의 지름 사이즈를 적용한다.
• mousedown 이벤트때 꼭지점들중 가장 큰 거리와 계산한 거리로 조건을 걸어 더이상 커지지 않게 하거나 색깔을 바꿀 수 있을 것이다.

mouseup

• mousemove 이벤트를 막는 장치를 해제한다.

---

이정도로 마우스 이벤트 부분이 이 데모의 핵심 로직이다.
대각선의 길이를 가져오는 수식이 피타고라스던데 저때 학교에서 졸아서 이제서야 약간 이해한 수준이다. ㅋㅋ

터치까지 만들 필요없어서 마우스 이벤트만 넣은 셈이다.