스크롤 위치에 따라 이미지가 반응하여 점점 커지게 하기(max = 꽉찬 화면)
모든 해상도에 맞추기(scale)
쉬울 것 같았지만 모든 해상도에 맞추기 위해 이미지의 높이와 넓이를 정해둘 수 없었기에 꽤나 어려웠다.
이를 해결하기 위해 화면의 높이, 넓이에 따라 비율을 구해 scale로 이미지의 크기를 화면에 맞췄다.
또한, scale로 변경된 캔버스의 실제 크기를 알아야 했기 때문에
const recalculatedWidth = document.body.offsetWidth / scaleRatio;위와 같이 화면에 보이는 넓이에서 scale 비율만큼 나누어주었다.
이렇게 해야하는 이유는 scale 비율만큼 canvas가 그려지기 때문이다.
예를들어 1080px의 높이를 가진 canvas에 scale(0.9)를 하게 되면 972px의 높이를 가지게 된다.
여기에 972px의 높이로 fillRect를 하게 되면 972px의 0.9배를 색칠하게 된다.
그래서 fillRect를 제대로 적용하기 위해 972px을 scale의 비율인 0.9로 나누게 되면 1080px이 되고, 1080px의 높이로 fillRect를 하면 원하는대로 모두 색칠되는 것을 볼 수 있다.
이것을 이해하는 데 많은 시간이 걸렸었다.
window.innerWidth vs document.body.offsetWidth
window.innerWidth 대신 document.body.offsetWidth를 사용한 이유로는 크롬 브라우저에서 innerWidth를 하면 스크롤을 포함한 width를 반환한다고 한다.
하지만 나에게 필요한 것은 스크롤을 제외한 width였기 때문에 offsetWidth를 사용했다. 이는 스크롤을 제외한 width를 반환한다.
이미지를 커지게 하기
fillRect를 사용한 이유는 만약 내가 강의를 보지 않았더라면 절대 생각하지 못할 이유였는데, 이미지가 스크롤에 따라 커지는 것이 아니라 이미지는 그대로이고 양 옆에 하얀색으로 색칠하면서 이미지가 커지는 것처럼 보이는 것이었다.
그래서 양 옆에 일정한 폭을 가진 rect를 설정해두고, 스크롤에 따라 x좌표를 이동해주면서 fillRect를 사용했다.
이것을 할 때, 정말 고생한 것이 있는데 fillRect는 canvas에 색칠을 하는 것이지 이미 존재하는 그림을 지우는 것이 아니라는 사실을 몰랐었다.
당연한 사실임에도 불구하고 스크롤을 올릴 때 양 옆이 커지면서 이미지가 작아지지만 스크롤을 내릴 때 양 옆이 작아지면서 이미지가 커지는 것이 동작하지 않았다.
이를 해결하기 위해 다른 함수들의 반환 값을 모두 확인해봤는데 아무리 확인해도 이상한 점이 없었고, 스크롤을 할 때마다 canvas에 이미지를 다시 그리는 한 줄의 코드를 통해 해결할 수 있었다.
objs.context.drawImage(values.imagesSrc[0], 0, 0);즉, 스크롤을 할 때마다 이미지를 그리고, 양 옆을 fillRect로 색칠하는 것이었는데, 난 이미지를 그리는 것을 생각하지 못해서 fillRect는 하루종일 양 옆만 색칠하고 있었던 것이다. 그래서 이미지가 작아지는 것만 동작하고 커지지는 않았었다.
기본적인 내용을 충실하게 공부한 뒤에 코딩을 하는 습관을 들이자..
