Canvas를 활용한 좌석 그리기와 기능 구현

기본적인 좌석 그리기

• x, y 좌표를 통해 정사각형을 그립니다.

    Object.values(componentSeats).forEach((seat: SeatInfo) => {
      ctx.current.fillStyle = seat.color;
      ctx.current.fillRect(
        seat.point.x - drawOffset.x - movedXOffset,
        seat.point.y - drawOffset.y - movedYOffset,
        seatLength,
        seatLength,
      );
    });

클릭 이벤트 감지

• 다음과 같이 해당 canvas에서의 좌표를 통해 클릭 이벤트를 감지하게 됩니다.

      if (
          e.offsetX > (seat.point.x - drawOffset.x) * scale &&
          e.offsetX < (seat.point.x - drawOffset.x) * scale + seatLength * scale &&
          e.offsetY > (seat.point.y - drawOffset.y) * scale &&
          e.offsetY < (seat.point.y - drawOffset.y) * scale + seatLength * scale
        )

zoomIn & Out

• 확대의 경우 1, 1.05, 1.1 ... 2배까지 배율을 점차 늘리게 된다.
• 축소의 경우 1, 0.975, 0.950, ... 0.5배까지 배율을 점차 줄이게 된다.
• 총 20프레임에 나누어서 진행 된다.
• zoomCount를 통해 원배율에서는 확대만 가능하고 최대 2번 확대가 가능하다

 const zoomIn = () => {
    movedXOffset = 0;
    movedYOffset = 0;
    if (zoomCount >= 2) return;
    zoomCount++;

    let currentFrame: number = 0;
    let animationScale: number = 1;
    ctx.current.save();

    const zoomInAnimation = setInterval(function () {
      if (currentFrame <= totalAnimationFrame) {
        //원상태로 복구
        ctx.current.restore();
        //원 상태를 저장
        ctx.current.save();
        scale *= animationScale;
        //캔버스를 확대
        ctx.current.scale(animationScale, animationScale);
        //좌석을 그린다.
        drawSeats();
        scale /= animationScale;
        currentFrame++;
        animationScale += 0.05;
      } else {
        clearTimeout(zoomInAnimation);
        scale *= 2;
        return;
      }
    }, 5);
  };

드래그 기능

const dragging = (e: any) => {
    e.stopPropagation();
    const canvas = canvasRef.current;
    isDragged = true;
    let lastX = e.offsetX;
    let lastY = e.offsetY;

    if (xDiff || yDiff) {
      //최초로 마우스가 눌린 곳과 마우스가 가장 마지막에 위치한 좌표를 배율을 고려햐여 빼준다.
      movedXOffset = (xDiff -lastX) / scale;
      movedYOffset = (yDiff - lastY) / scale;

      //좌석 배치도 왼쪽으로 벗어나지 못하게 한다.
      if (movedXOffset + drawOffset.x < 0) {
        movedXOffset = -drawOffset.x;
      }
      
      //좌석 배치도 위로 벗어나지 못하게 한다.
      if (movedYOffset + drawOffset.y < 0) {
        movedYOffset = -drawOffset.y;
      }
      // 좌석 배치도 오른쪽으로 벗어나지 못하게 한다.
      if (movedXOffset + drawOffset.x > canvas.width - canvas.width / scale) {
        movedXOffset = canvas.width - canvas.width / scale - drawOffset.x;
      }
      // 좌석 배치도 아래로 벗어나지 못하게 한다.
      if (movedYOffset + drawOffset.y > canvas.height - canvas.height / scale) {
        movedYOffset = canvas.height - canvas.height / scale - drawOffset.y;
      }
      drawSeats();
    }
  };