nextjs 웹뷰 안드로이드에서 이미지 확대 기능 2

이전 포스팅과 연결이 되는 포스팅입니다.

이전 포스팅에서도 카카오 기술 블로그를 통해서 안드로이드에서 이미지 확대 기능을 제작 하는 것을 보고 따라 하게 되었는데요.

카카오 기술 블로그 : https://fe-developers.kakaoent.com/2023/230310-webview-pinch-zoom/

다만 심화 과정을 넘기고 그냥 확대만 되는 기능만 적용했었습니다.

문제 없을거라고 생각했는데 왜 심화를 하는지 이해가 되었습니다. 확대를 하는데 가운데밖에 확대가 안되어서 난감했거든요..

지정된 곳만 확대

한곳만 확대가 되는 사진 ..
그래서 심화과정으로 원하는 곳을 확대하는 것을 개발하게 되었습니다.

기술 개발자 분은 유클리드 공식으로 거리를 계산해서 x,y 좌표를 translation 으로 좌표 지정을 변경해주는 방법을 활용하였는데요. 공식만 봐도 정말 이해하기 힘든 부분이었지만 또 따라 치면서 코드를 적용하게 되었습니다.

역시나 마찬가지로 html 로 작성하신것을 저는 nextjs 로 구현 하기 위해 코드를 nextjs 에 맞춰서 수정해주었습니다. 그래도 계산하는 것이라서 거의 useState 정도 만 바뀌고 코드가 비슷합니다.

코드를 작성해주니 이제 좌표 대로 확대하고 싶은 부분을 확대가 가능하게 변경할수 있었습니다.

원하는 곳 확대

마무리로 카카오 기술블로그에서는 이미지를 이동하는 것을 구현했는데 어떻게 한지는 숙제로 남겨두었습니다.

이제 저에게도 숙제가 되었습니다. 이동하는 것도 계산 해서 이동하거나 기본 코드 내에서 확인해서 이동해야 하는데 남은 추가 작업들을 마치고 한번 적용해봐야 할것 같습니다.

수정된 코드를 또 남겨 놓고 이만 물러가도록 하겠습니다.

수정된코드

  const [touchState, setTouchState] = useState({
    x: 0,
    y: 0,
    scale: 1,
  }); // x,y좌표를 추가 해줍니다. 
  
  
  const handlePinch = (zoom: number, centerX: number, centerY: number) => {
    if (zoom === 0) {
      return;
    }
    setTouchState((prev) => {
      const { scale, x, y } = prev;
      const zoomWeight = 0.02;
      const nextScale = scale + (zoom > 0 ? zoomWeight : -zoomWeight);
      const biasX = ((centerX - x) * nextScale) / scale - (centerX - x);
      const biasY = ((centerY - y) * nextScale) / scale - (centerY - y);
      const nextX = x - biasX;
      const nextY = y - biasY;
      return { ...prev, scale: nextScale, x: nextX, y: nextY };
    });
  };
  
  x,y 좌표를 계산해주는 코드를 작성해주고 
   return (
    <>
      <div id="screen" ref={screen} style={{ overflow: "hidden" }}>
        <div
          id="img-wrappper"
          ref={imgWrapper}
          style={{
            transform: `translateX(${touchState.x}px) translateY(${touchState.y}px) scale(${touchState.scale})`,
            transformOrigin: "top left",
          }}
        >
          {children}
        </div>
      </div>
    </>
  );
  //return 부분에 transform과 transformOrigin 을 넣어줍니다.