• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

canvasScaleRatio관련 문의

22.03.15 11:00 작성 조회수 137

0

안녕하세요!

항상 수업 잘 듣고 있습니다.

canvasScaleRatio 계산 설명 중 궁금한 점이 있어 문의드립니다.

height에 딱 맞춰 계산한다고 하셨는데,

만약 브라우저창의 가로 너비가 더 길고 세로 길이가 더 짧아서 그 안의 캔버스의 가로 너비가 더 짧고, 세로 길이가 더 긴상태라면(즉, 캔버스보다 브라우저 창이 납작한 경우)

 

widthRatio 가 canvasScaleRatio가 되기때문에 

해당 값으로 scale조절이 된다면 캔버스가 화면 너비에는 꽉차게 되지만 height또한 더 길어지게 되어 height값이 화면과는 동일하지 않게 됩니다(화면보다 캔버스 세로 길이가 더 길어서 넘어가게됨)

 

그런데 영상 설명에서는 계속 height값을 꽉 맞추기 위해서라고 설명하시는데 이같은 경우는 height값이 화면가 동일하지 않습니다. 

 

결론:

브라우저 창이 홀쭉하든 납작하든 heightRatio로 계산하는게 맞지 않나요??

 case 3:
                // 가로/세로 모두 꽉 차게 하기 위해 여기서 세팅(계산 필요)
                const widthRatio = window.innerWidth / objs.canvas.width;
                const heightRatio = window.innerHeight / objs.canvas.height;

                let canvasScaleRatio;
                if (widthRatio <= heightRatio) {
                    // 캔보스보다 브라우저 창이 홀쭉한 경우
                    canvasScaleRatio = heightRatio;
                } else {
                    // 캔버스보다 브라우저 창이 납작한 경우
                    canvasScaleRatio = widthRatio;
                }

                objs.canvas.style.transform = `scale(${canvasScaleRatio})`;
                // objs.context.drawImage(objs.images[0], 0, 0);

                // // 캔버스 사이즈에 맞춰 가정한 innerWidth와 innerHeight
                // const recalculatedInnerWidth = window.innerWidth / canvasScaleRatio;
                // const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio;
                // console.log(recalculatedInnerWidth, recalculatedInnerHeight);

                // const whiteRectWidth = recalculatedInnerWidth * 0.15;

                break;
 
 
course-thumbnail

애플 웹사이트 인터랙션 클론!

블렌딩 캔버스 크기 계산

강의실 바로가기

답변 1

답변을 작성해보세요.

0

1분코딩님의 프로필

1분코딩

지식공유자

2022.03.22

네 말씀대로 이미지 비율에 따라 어느 부분을 꽉 채울거냐에 따라, 의도에 맞는 방법으로 진행하시면 될 것 같습니다~ 정해진게 아니니까요. 이미지 생긴거에 따라서도 위아래가 잘리는게 자연스러운지, 좌우가 잘리는게 자연스러운지도 달라질 것 같아요^^ 강의에서는 애플 웹페이지에서 맞추는 방식으로 최대한 비슷하게 한거라고 보시면 될 것 같습니다.

이 글과 비슷한 Q&A