티켓팅 안내 회전시 여백, 가로 오버플로우 이슈

[stories2]

티켓팅 안내 이미지를 단순 회전 시키면 이미지가 렌더링 되어지는 가로 크기에 따라서 가로 스크롤 이 생기고, 양 끝에 하얀색 여백이 생겨지는 문제 존재하였음

이 부분을 캔버스 렌더링 방식과 비율에 따른 자동 스케일링, 반응형 좌표 이동을 개발하여 해결함

위 그림의 경우 회전하면 회전 각에 따라 양 끝점의 좌표가 y = ax + b 에 의해 대략적으로 예측 되어짐

예를들어 대략 3도 정도 기울였을시 cos(3° * Math.PI / 180) 로 x,
sin(3° * Math.PI / 180) 로 y 값이 (0.999, 0.0519) 로 구해지면

원점을 지나는 일차 함수의 기울기를 구할 수 있음

이를 이용하여 이미지가 렌더링 되어질 전체 높이 크기를 구한 다음

그려질 캔버스 높이 크기와 비율을 계산하여 축소시킨 이미지로 렌더링 함

물론 브라우저 크기 변화에 따라 다시 렌더링해야 할 경우엔 이벤트 리스너 등록시켜서 렌더링 호출 시킴

[github-actions]

Visit the preview URL for this PR (updated for commit a76b3ac):

https://uta-conne--pr27-artist-ticketing-klvu1f95.web.app

_{(expires Tue, 22 Jun 2021 08:36:15 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}