인프런 커뮤니티 질문&답변

찡태님의 프로필 이미지
찡태

작성한 질문수

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

선생님 recalculatedInnerWidth에 대한 질문입니다!

작성

·

173

0

const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio;
values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2;
values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth;

제가 canvas에 대해 잘몰라서 이해를 잘 못하는 것 같습니다.

선생님께서 canvas의 너비를 다시구하는 부분이 잘 이해가 되지않아서 생각해 보던중

선생님께서 말씀해주신 canvas에서 보이는 부분의 너비를 빼고 2로 나누어서 잘려진 부분의 너비를 구하고 그 너비를 시작으로 박스를 만든다고 이해했습니다.

1. objs.canvas.width * canvasScaleRatio를 하게되면 현재 브라우저에 설정된 canvas의 너비를 구할 수 있다고 생각합니다.

이 값에서   values.rect1X[0] = ((objs.canvas.width * canvasScaleRatio) - document.body.offsetWidth)  /2 를 설정하고

values.rect2X[0] = values.rect1X[0] + document.body.offset - whiteRectWidth 을 해도 될거같아서 해봤는데..ㅠ 결과는 왼쪽은 맞는데 오른쪽이 맞지 않았습니다. (왼쪽도 선생님께서 구하신 것보다는 딱맞는다는 느낌은 들지 않았습니다.)

제가 느끼기에는 fillRect에 설정하는 값이 브라우저에서 사용하는 값과 이격이 있는거 같은데... 맞나요??

예를 들어서 fillRect에 x값을 100을 설정하는 것과 브라우저의 100px과는 다른것 같아서 여쭤봅니다..ㅠㅠ

2.그리고 이거는 다른 질문인데 선생님께서 마우스를 이용하여 픽셀 높이를 줄자처럼 재시던데.. 그거는 혹시 프로그램인가요?

답변 2

1

1분코딩님의 프로필 이미지
1분코딩
지식공유자

1. fillRect에서 사용하는 단위도 픽셀이기 때문에 다르지는 않습니다. 다만 우리가 기본적으로 캔버스 크기 자체를 CSS transform의 scale로 조정해두었기 때문에, 시각적으로 보이는 크기와 실제 좌표 계산에 필요한 크기가 달라서 발생하는 차이라고 생각하시면 될 것 같습니다^^

2. 맥에서 기본적으로 제공하는 부분 스크린 캡쳐(command + shift + 4) 기능을 이용했습니다.

0

찡태님의 프로필 이미지
찡태
질문자

감사합니다!

찡태님의 프로필 이미지
찡태

작성한 질문수

질문하기