Skip to content

hangem422/dragging-box

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dragging Box

Sample Image

원본

파일 구조와, 코드 스타일을 변경했습니다. 원본을 참고하고 싶으시면 아래 링크를 이용해주세요.

개선점

1. 파일 구조와 코드 스타일 변경

2. 마우스 포인터 성능 개선

  • 포인트 이벤트 리스너 최적화

    • pointermove 이벤트 콜백 함수가 매번 실행되지 않도록, pointerdown 이벤트에서 등록되고 pointerup 이벤트에서 삭제되도록 수정

3. Dialog 성능 개선

  • 화면 리사이징시 성능 개선

    • 기존 코드에서는 화면이 리사이징되면 모든 카드의 애니메이션이 취소되고, 위치 초기화
    • 애니메이션이 취소되지 않고 새로운 화면 크기에 맞춰서 Dialog가 배치되도록 개선
    • 추가적으로 Dialog와 Line이 화면 밖으로 나가지 않도록 조정
  • Dialog Rotation 성능 개선

    • 기존 코드는 Dialog 어디를 클릭하여 드래그해도 기울기가 같음
    • Dialog 상단을 드래그하면 정방향, 하단을 드래그하면 역방향으로 회전하게 변경해 더욱 현실적인 움직임을 연출
    • Dialog 중단을 드래그할수록 회전율이 감소하게 변경해 더욱 자연스러운 움직임을 연출
    • 의미없고 불필요한 연산을 제거
  • Dialog 다양성 증가

    • 기존 코드는 모든 Dialog가 동일한 모양
    • 옵션을 사용하여 서로 다른 색상과 크기를 갖는 Dialog를 만들 수 있게 개선