Function useDrawingOperation

캔버스의 실제 드로잉 작업을 수행하는 Hook입니다.

Remarks

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

  • 스트로크 그리기
  • 영역 채우기 작업
  • 캔버스 다시 그리기
  • 스타일 관리

useDrawingState와 함께 작동하여 드로잉 컨텍스트를 유지하고 캔버스의 실제 픽셀 조작을 처리합니다.

Example

const canvasRef = useRef<HTMLCanvasElement>(null);
const state = useDrawingState({ maxPixels: 1000 });
const operations = useDrawingOperation(canvasRef, state);

// 드로잉 작업 사용 예시
operations.drawStroke({
  points: [{x: 0, y: 0}, {x: 10, y: 10}],
  style: operations.getCurrentStyle()
});
  • useDrawingOperation(canvasRef, state): {
        applyFill: ((drawingData: DrawingData) => void);
        clearCanvas: (() => void);
        drawStroke: ((drawingData: DrawingData) => void);
        floodFill: ((startX: number, startY: number) => {
            points: Point[];
            style: StrokeStyle;
            timestamp: number;
        });
        getCurrentStyle: (() => StrokeStyle);
        redrawCanvas: (() => void);
    }

  • Parameters

    • canvasRef: RefObject<HTMLCanvasElement>

      캔버스 엘리먼트의 RefObject

    • state: {
          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);
      }

      useDrawingState에서 반환된 드로잉 상태

      • 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

    Returns {
        applyFill: ((drawingData: DrawingData) => void);
        clearCanvas: (() => void);
        drawStroke: ((drawingData: DrawingData) => void);
        floodFill: ((startX: number, startY: number) => {
            points: Point[];
            style: StrokeStyle;
            timestamp: number;
        });
        getCurrentStyle: (() => StrokeStyle);
        redrawCanvas: (() => void);
    }

    드로잉 작업 메소드들을 포함하는 객체

    • applyFill: ((drawingData: DrawingData) => void)
        • (drawingData): void

        • Parameters

          • drawingData: DrawingData

          Returns void

    • clearCanvas: (() => void)
        • (): void

        • Returns void

    • drawStroke: ((drawingData: DrawingData) => void)
        • (drawingData): void

        • Parameters

          • drawingData: DrawingData

          Returns void

    • floodFill: ((startX: number, startY: number) => {
          points: Point[];
          style: StrokeStyle;
          timestamp: number;
      })
        • (startX, startY): {
              points: Point[];
              style: StrokeStyle;
              timestamp: number;
          }

        • Parameters

          • startX: number
          • startY: number

          Returns {
              points: Point[];
              style: StrokeStyle;
              timestamp: number;
          }

          • points: Point[]
          • style: StrokeStyle
          • timestamp: number
    • getCurrentStyle: (() => StrokeStyle)
        • (): StrokeStyle

        • Returns StrokeStyle

    • redrawCanvas: (() => void)
        • (): void

        • Returns void

Settings

Member Visibility