728x90
반응형
저번주에 완성한 canvas부분이 분명 내 화면에서는 잘 보였는데, yany의 화면에서는 이상하게 나타나는 문제가 발생했다.
canvas의 크기가 뭔가 내것보다 작게 나왔다.
곰곰히 생각해보니 레티나 디스플레이 dps(device pixel ratio)문제일거라 생각해서 yany의 dps를 보니 약 1.799인가 그랬다.
그리고 내 코드를 보니, 내 dps에 맞춰서 코드를 작성해놓은 것을 알게됐다.
나는 dps가 2인데 yany는 1.799이니, dps로 나누거나 곱하는 부분에서 비율이 엉망이 되버렸던 것이다.
useEffect(() => {
const canvas = canvasBottomRef.current;
if (canvas) {
const context = canvas.getContext("2d");
if (context){
// 캔버스 크기를 레티나 디스플레이에 맞게 설정
const scaleFactor = window.devicePixelRatio;
if (!isScaled){
canvas.width = canvas.width * scaleFactor;
canvas.height = canvas.height * scaleFactor;
context.scale(scaleFactor, scaleFactor);
setScaled(true);
}
context.clearRect(0, 0, canvas.width, canvas.height);
// 그림자 설정
context.shadowColor = "rgba(0, 0, 0, 0.6)";
context.shadowBlur = 20;
context.shadowOffsetX = 0;
context.shadowOffsetY = -5;
// 곡선 그리기
context.beginPath();
context.moveTo(0, 150);
context.quadraticCurveTo(canvas.width / (scaleFactor*2), 50, canvas.width / scaleFactor, 150);
// 라인 그리기
context.lineTo(canvas.width / scaleFactor, canvas.height / scaleFactor);
context.lineTo(0, canvas.height / scaleFactor);
context.lineTo(0, 150);
context.closePath(); // 시작점과 끝점을 연결하여 닫힌 도형으로 만듭니다.
context.fillStyle = "#b34b47";
context.fill(); // 채우기
}
}
}, [])
바뀐 코드는 위와 같다.
나의 경우 커브를 그리는 부분과, 커브 밑쪽 부분을 채우는 곳이 전부 좌표를 찍도록 돼있었다.
바뀐 canvas 너비와 높이에 대해 dps로 나눠야했는데, 이 부분을 그냥 2라고 생각하고 넣어놓은 것이 문제였다.
