Function useDrawing

캔버스 드로잉 기능을 관리하는 Hook입니다.

Remarks

캔버스의 실제 드로잉 작업을 처리합니다.

  • 펜/채우기 모드 드로잉
  • 실행 취소/다시 실행
  • 잉크 잔량 관리
  • 실시간 드로잉 데이터 동기화 및 기록

드로잉은 mousedown부터 mouseup까지를 하나의 단위로 처리하며, 실시간으로는 각 stroke 단위로 동기화하고 히스토리는 mouseup 단위로 기록됩니다.

Example

const GameCanvas = ({ role, maxPixels = 100000 }: GameCanvasProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const {
    currentColor,
    brushSize,
    drawingMode,
    inkRemaining,
    startDrawing,
    continueDrawing,
    stopDrawing,
  } = useDrawing(canvasRef, { maxPixels });

  const handleDrawStart = useCallback((e: ReactMouseEvent | ReactTouchEvent) => {
    const point = getDrawPoint(e, canvasRef.current);
    startDrawing(point);
  }, [startDrawing]);

  return (
    <Canvas
      canvasRef={canvasRef}
      isDrawable={true}
      brushSize={brushSize}
      inkRemaining={inkRemaining}
    />
  );
};
  • useDrawing(canvasRef, roomStatus, options?): {
        applyDrawing: ((crdtDrawingData: CRDTMessage) => void);
        brushSize: any;
        canRedo: boolean;
        canUndo: boolean;
        continueDrawing: ((point: Point) => CRDTUpdateMessage);
        currentColor: any;
        drawingMode: DrawingMode;
        getAllDrawingData: (() => CRDTSyncMessage);
        inkRemaining: any;
        redo: (() => CRDTUpdateMessage[]);
        resetCanvas: (() => void);
        setBrushSize: Dispatch<any>;
        setCurrentColor: Dispatch<any>;
        setDrawingMode: Dispatch<any>;
        startDrawing: ((point: Point) => CRDTUpdateMessage);
        stopDrawing: (() => void);
        undo: (() => CRDTUpdateMessage[]);
    }

  • Parameters

    • canvasRef: RefObject<HTMLCanvasElement>

      캔버스 엘리먼트의 RefObject

    • roomStatus: RoomStatus
    • Optionaloptions: {
          maxPixels?: number;
      }

      드로잉 설정 옵션

      • OptionalmaxPixels?: number

        최대 사용 가능한 픽셀 수

    Returns {
        applyDrawing: ((crdtDrawingData: CRDTMessage) => void);
        brushSize: any;
        canRedo: boolean;
        canUndo: boolean;
        continueDrawing: ((point: Point) => CRDTUpdateMessage);
        currentColor: any;
        drawingMode: DrawingMode;
        getAllDrawingData: (() => CRDTSyncMessage);
        inkRemaining: any;
        redo: (() => CRDTUpdateMessage[]);
        resetCanvas: (() => void);
        setBrushSize: Dispatch<any>;
        setCurrentColor: Dispatch<any>;
        setDrawingMode: Dispatch<any>;
        startDrawing: ((point: Point) => CRDTUpdateMessage);
        stopDrawing: (() => void);
        undo: (() => CRDTUpdateMessage[]);
    }

    드로잉 관련 상태와 메소드들을 포함하는 객체

    • applyDrawing: ((crdtDrawingData: CRDTMessage) => void)
        • (crdtDrawingData): void

        • Parameters

          • crdtDrawingData: CRDTMessage

          Returns void

    • brushSize: any
    • canRedo: boolean
    • canUndo: boolean
    • continueDrawing: ((point: Point) => CRDTUpdateMessage)
        • (point): CRDTUpdateMessage

        • Parameters

          • point: Point

          Returns CRDTUpdateMessage

    • currentColor: any
    • drawingMode: DrawingMode
    • getAllDrawingData: (() => CRDTSyncMessage)
        • (): CRDTSyncMessage

        • Returns CRDTSyncMessage

    • inkRemaining: any
    • redo: (() => CRDTUpdateMessage[])
        • (): CRDTUpdateMessage[]

        • Returns CRDTUpdateMessage[]

    • resetCanvas: (() => void)
        • (): void

        • Returns void

    • setBrushSize: Dispatch<any>
    • setCurrentColor: Dispatch<any>
    • setDrawingMode: Dispatch<any>
    • startDrawing: ((point: Point) => CRDTUpdateMessage)
        • (point): CRDTUpdateMessage

        • Parameters

          • point: Point

          Returns CRDTUpdateMessage

    • stopDrawing: (() => void)
        • (): void

        • Returns void

    • undo: (() => CRDTUpdateMessage[])
        • (): CRDTUpdateMessage[]

        • Returns CRDTUpdateMessage[]

Settings

Member Visibility