Function useDrawingState

캔버스 드로잉의 상태를 관리하는 Hook입니다.

Remarks

드로잉과 관련된 모든 상태를 관리합니다.

  • 현재 드로잉 설정 (색상, 브러시 크기, 모드)
  • 잉크 관리
  • 실행 취소/다시 실행을 위한 히스토리 추적
  • 협업 드로잉을 위한 CRDT 상태

드로잉 작업과 여러 사용자 간의 동기화를 위한 기반을 제공합니다.

Example

const DrawingComponent = () => {
  const {
    currentColor,
    brushSize,
    inkRemaining,
    setCurrentColor,
    setBrushSize
  } = useDrawingState({ maxPixels: 1000 });

  return (
    <div>
      <ColorPicker
        value={currentColor}
        onChange={setCurrentColor}
      />
      <BrushSizeSlider
        value={brushSize}
        onChange={setBrushSize}
      />
      <InkMeter value={inkRemaining} />
    </div>
  );
};
  • useDrawingState(options?): {
        brushSize: any;
        canRedo: boolean;
        canUndo: boolean;
        checkInkAvailability: (() => boolean);
        crdtRef: MutableRefObject<LWWMap>;
        currentColor: any;
        currentPlayerId: any;
        currentStrokeIdsRef: MutableRefObject<string[]>;
        drawingMode: DrawingMode;
        historyPointerRef: MutableRefObject<number>;
        inkRemaining: any;
        resetDrawingState: (() => void);
        setBrushSize: Dispatch<any>;
        setCurrentColor: Dispatch<any>;
        setDrawingMode: Dispatch<any>;
        setInkRemaining: Dispatch<any>;
        strokeHistoryRef: MutableRefObject<StrokeHistoryEntry[]>;
        updateHistoryState: (() => void);
    }

  • Parameters

    • Optionaloptions: {
          maxPixels?: number;
      }

      드로잉 상태 설정 옵션

      • OptionalmaxPixels?: number

        드로잉에 사용할 수 있는 최대 픽셀 수

    Returns {
        brushSize: any;
        canRedo: boolean;
        canUndo: boolean;
        checkInkAvailability: (() => boolean);
        crdtRef: MutableRefObject<LWWMap>;
        currentColor: any;
        currentPlayerId: any;
        currentStrokeIdsRef: MutableRefObject<string[]>;
        drawingMode: DrawingMode;
        historyPointerRef: MutableRefObject<number>;
        inkRemaining: any;
        resetDrawingState: (() => void);
        setBrushSize: Dispatch<any>;
        setCurrentColor: Dispatch<any>;
        setDrawingMode: Dispatch<any>;
        setInkRemaining: Dispatch<any>;
        strokeHistoryRef: MutableRefObject<StrokeHistoryEntry[]>;
        updateHistoryState: (() => void);
    }

    드로잉 상태와 관리 함수들을 포함하는 객체

    • brushSize: any
    • canRedo: boolean
    • canUndo: boolean
    • checkInkAvailability: (() => boolean)
        • (): boolean

        • Returns boolean

    • crdtRef: MutableRefObject<LWWMap>
    • currentColor: any
    • currentPlayerId: any
    • currentStrokeIdsRef: MutableRefObject<string[]>
    • drawingMode: DrawingMode
    • historyPointerRef: MutableRefObject<number>
    • inkRemaining: any
    • resetDrawingState: (() => void)
        • (): void

        • Returns void

    • setBrushSize: Dispatch<any>
    • setCurrentColor: Dispatch<any>
    • setDrawingMode: Dispatch<any>
    • setInkRemaining: Dispatch<any>
    • strokeHistoryRef: MutableRefObject<StrokeHistoryEntry[]>
    • updateHistoryState: (() => void)
        • (): void

        • Returns void

Settings

Member Visibility