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: ((crdtMessage: CRDTMessage<DrawingData>) => void);
        brushSize: any;
        canRedo: boolean;
        canUndo: boolean;
        continueDrawing: ((point: Point) => CRDTUpdateMessage<DrawingData>);
        createDrawingData: ((points: Point[], type: DrawType, inkRemaining: number) => DrawingData);
        currentColor: any;
        drawingMode: DrawingMode;
        inkRemaining: any;
        makeCRDTSyncMessage: (() => CRDTSyncMessage<DrawingData>);
        makeCRDTUpdateMessage: ((key: string) => CRDTUpdateMessage<DrawingData>);
        redo: (() => CRDTUpdateMessage<DrawingData>[]);
        resetCanvas: (() => void);
        setBrushSize: Dispatch<any>;
        setCurrentColor: Dispatch<any>;
        setDrawingMode: Dispatch<any>;
        startDrawing: ((point: Point) => CRDTUpdateMessage<DrawingData>);
        stopDrawing: (() => void);
        undo: (() => CRDTUpdateMessage<DrawingData>[]);
    }

  • Parameters

    • canvasRef: RefObject<HTMLCanvasElement>

      캔버스 엘리먼트의 RefObject

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

      드로잉 설정 옵션

      • OptionalmaxPixels?: number

        최대 사용 가능한 픽셀 수

    Returns {
        applyDrawing: ((crdtMessage: CRDTMessage<DrawingData>) => void);
        brushSize: any;
        canRedo: boolean;
        canUndo: boolean;
        continueDrawing: ((point: Point) => CRDTUpdateMessage<DrawingData>);
        createDrawingData: ((points: Point[], type: DrawType, inkRemaining: number) => DrawingData);
        currentColor: any;
        drawingMode: DrawingMode;
        inkRemaining: any;
        makeCRDTSyncMessage: (() => CRDTSyncMessage<DrawingData>);
        makeCRDTUpdateMessage: ((key: string) => CRDTUpdateMessage<DrawingData>);
        redo: (() => CRDTUpdateMessage<DrawingData>[]);
        resetCanvas: (() => void);
        setBrushSize: Dispatch<any>;
        setCurrentColor: Dispatch<any>;
        setDrawingMode: Dispatch<any>;
        startDrawing: ((point: Point) => CRDTUpdateMessage<DrawingData>);
        stopDrawing: (() => void);
        undo: (() => CRDTUpdateMessage<DrawingData>[]);
    }

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

    • applyDrawing: ((crdtMessage: CRDTMessage<DrawingData>) => void)
        • (crdtMessage): void

        • Parameters

          • crdtMessage: CRDTMessage<DrawingData>

          Returns void

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

        • Parameters

          • point: Point

          Returns CRDTUpdateMessage<DrawingData>

    • createDrawingData: ((points: Point[], type: DrawType, inkRemaining: number) => DrawingData)
        • (points, type, inkRemaining): DrawingData

        • Parameters

          • points: Point[]
          • type: DrawType
          • inkRemaining: number

          Returns DrawingData

    • currentColor: any
    • drawingMode: DrawingMode
    • inkRemaining: any
    • makeCRDTSyncMessage: (() => CRDTSyncMessage<DrawingData>)
        • (): CRDTSyncMessage<DrawingData>

        • Returns CRDTSyncMessage<DrawingData>

    • makeCRDTUpdateMessage: ((key: string) => CRDTUpdateMessage<DrawingData>)
        • (key): CRDTUpdateMessage<DrawingData>

        • Parameters

          • key: string

          Returns CRDTUpdateMessage<DrawingData>

    • redo: (() => CRDTUpdateMessage<DrawingData>[])
        • (): CRDTUpdateMessage<DrawingData>[]

        • Returns CRDTUpdateMessage<DrawingData>[]

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

        • Returns void

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

        • Parameters

          • point: Point

          Returns CRDTUpdateMessage<DrawingData>

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

        • Returns void

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

        • Returns CRDTUpdateMessage<DrawingData>[]

Settings

Member Visibility