고라니드로koranidro.hashnode.dev·Nov 3, 2024[TypeScript] 제스처로 대화하기. #9 - 팬(with. 스와이프) 편이번 편은 이전 편으로부터 이어집니다. 스와이프는 특정 축을 따라 이동하는 팬 동작을 의미합니다. 즉, 이동 축을 제한한 팬입니다. 대부분 수직, 수평 축에 대해 사용합니다. 축을 제한하려면 어떻게 해야 할까요? 이를 위해서는 포인터의 좌표를 축 위에 놓아야 합니다. 이는 축에 내린 수선의 발을 구하는 문제와 동일합니다. function findPerpendicularFootOnAxis(x: number, y: number, axis: num...Discuss[TypeScript] 제스처로 대화하기.gesture
고라니드로koranidro.hashnode.dev·Oct 27, 2024[TypeScript] 제스처로 대화하기. #8 - 팬(with. 드래그) 편이번 편은 이전 편으로부터 이어집니다. pointermove를 드래그 대상에 설정하면 포인터를 빠르게 이동할 경우, 대상을 놓치는 것을 느끼셨을 겁니다. 왜 이런 일이 벌어질까요? 상상해 보세요. 포인터가 이동했습니다. 충분히 이동했다면 요소 바깥으로 넘어갔을 겁니다. 이후 핸들러가 호출되고, 대상을 이동하면 포인터를 따라잡을 겁니다. 하지만 핸들러가 호출되기 전에 포인터가 한 번 더 이동하면 어떻게 될까요? 이번에도 충분히 이동했다면 대상이...Discuss[TypeScript] 제스처로 대화하기.JavaScript
고라니드로koranidro.hashnode.dev·Oct 20, 2024[TypeScript] 제스처로 대화하기. #7 - 팬 편잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 팬은 포인터를 누른 상태로 방향 상관없이 이동하는 것을 말합니다. 좌표가 중요했던 이전 제스처와는 달리 이번에 중요한 것은 이동량입니다. 즉, 이전 좌표로부터 현재 좌표는 얼마 만큼 이동했느냐가 관건이지요. interface Point { x: number; y: number; } ...Discuss[TypeScript] 제스처로 대화하기.pan
![[TypeScript] 제스처로 대화하기. #9 - 팬(with. 스와이프) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/AkEr0jc5Lvs/upload/196668bd6e89b7cd40ac8524a8f00963.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #8 - 팬(with. 드래그) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/Je6p3FF4jh0/upload/1043002fa96fda078514eafbea299e21.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #7 - 팬 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/VHMeU2sUGAs/upload/7404b64bf217df98027f8e04544d955e.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)