🌊 Scatter 효과

Canvas API를 이용하여 텍스트가 마우스와 상호작용하며, 모래처럼 흩어지는 효과입니다.

IntroPage.tsx 와 MainPage.tsx에서 사용되기 때문에, 재사용을 위해 ScatterCanvas.tsx 컴포넌트로 분리하여 관리합니다.

ScatterCanvas.tsx Props 설명

• text - 줄바꿈을 고려해 string[]타입으로 Props에 전달됩니다. 빈 string값(””)이 줄바꿈의 의미입니다.
• afterAnimationFunc - scatter 효과가 끝난 뒤 실행해줄 함수입니다. 다음페이지(다음 레벨)로 넘어가는 로직이 담긴 함수를 주로 전달합니다.

전체적인 동작 설명

*** pointerDiv - 컨버스 위에(더 높은 z-index) 위치한 Div Element로, 그려진 text와 같은 너비, 높이를 가지고 text와 같은 위치에 존재합니다. Scatter 효과의 진행을 위해서 사용자의 마우스이벤트(onMouseUp, onMouseDown)을 받고, 사용자의 마우스 클릭을 유도하기 위해 cursor: pointer 스타일이 적용되어 있습니다.

1️⃣ canvas에 원하는 폰트로 text 그리기 및 pointerDiv 너비와 높이 설정

fillText메서드를 이용하여 원하는 폰트로 컨버스에 text를 그려줍니다.

컨버스에는 css파일에 작성해준 mediaQuery font-size가 적용되지 않기 때문에 컨버스의 너비에 따라 폰트 사이즈값을 반환해주는 객체(canvasFontSize)를 별도로 작성해주었습니다.

주의할 점은 사용하려하는 폰트의 load가 완료된 이후에 text를 그려주어야 한다는 것입니다. Web API 중 CSS Font Loading API를 이용하여 폰트파일의 로딩이 완료된 이후에 text를 그려줍니다.

text를 그린 후 pointerDiv의 너비와 높이를 설정해줍니다. 높이는 text 배열의 길이를 통해 계산해준 totalHeight 값이 되고, 너비는 text 배열중 가장 긴 text의 너비값이 됩니다. 너비값은 컨버스의 measureText메서드를 통해 계산된 값을 가져옵니다.

• drawText 함수

const drawText = useCallback(() => {
    if (!canvas) return;

    const FONT_SIZE = canvasFontSize(canvas.CANVAS_WIDTH);
    const LINE_VALUE = 5; // 줄 간격 값 5px
    const ctx = canvas.ctx as CanvasRenderingContext2D;
    const totalHeight = text.length * FONT_SIZE + (LINE_VALUE * text.length - 1);
    const x = canvas.CANVAS_WIDTH / 2;
    const y = (canvas.CANVAS_HEIGHT - totalHeight) / 2 + FONT_SIZE;

    let met;
    let maxWidth = 0;
    let lineHeight = 0;

    const fontFile = new FontFace("KoPubWorld Medium", `url(${font_ttf}) format("truetype")`);
    document.fonts.add(fontFile);
    fontFile
      .load()
      .then(() => {
        ctx.font = `${FONT_SIZE}px KoPubWorld Medium`;
        ctx.fillStyle = "#FFFFFF";
        ctx.textAlign = "center";

        for (let i = 0; i < text.length; i++) {
          ctx.fillText(text[i], x, y + FONT_SIZE * i + lineHeight);
          lineHeight += LINE_VALUE;

          met = ctx.measureText(text[i]);
          if (!maxWidth) maxWidth = met.width;
          else if (maxWidth < met.width) maxWidth = met.width;
        }

        if (speechService.tts)
          speechService.synth.speak(text.join(""), {
            endEvent: () => {
              onMouseDownPointerDiv({ width: maxWidth, height: totalHeight });
              onMouseUpPointerDiv();
            },
          });
        else setPointerDiv({ width: maxWidth, height: totalHeight });
      })
      .catch((err: string) => {
        console.log(`font 에러 발생: ${err}`);
      });
  }, [canvas, text, speechService, onMouseDownPointerDiv, onMouseUpPointerDiv]);

useEffect(() => {
    if (!canvas) return;
    canvas.init();
    canvas.setFrame(15);

    drawText();

    const myResize = debounce(() => {
			**// resize 이벤트는 animation 실행중에는 실행되지 않습니다.**
			if (canvas.isAnim) return;

      canvas.init();
      drawText();
    }, 300);

    window.addEventListener("resize", myResize);

    return () => {
      window.removeEventListener("resize", myResize);
    };
  }, [canvas, drawText]);