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, color: string, inkRemaining: number, options?: {
            dryRun?: boolean;
        }) => {
            pixelCount: number;
        });
        getCurrentStyle: (() => StrokeStyle);
        redrawCanvas: (() => void);
        renderStroke: ((drawingData: DrawingData) => void);
    }

  • Parameters

    • canvasRef: RefObject<HTMLCanvasElement>

      캔버스 엘리먼트의 RefObject

    • state: {
          brushSize: any;
          canRedo: boolean;
          canUndo: boolean;
          checkInkAvailability: (() => boolean);
          crdtRef: MutableRefObject<LWWMap<DrawingData>>;
          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<string[][]>;
          updateHistoryState: (() => void);
      }

      useDrawingState에서 반환된 드로잉 상태

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

          • Returns boolean

      • crdtRef: MutableRefObject<LWWMap<DrawingData>>
      • 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<string[][]>
      • updateHistoryState: (() => void)
          • (): void

          • Returns void

    Returns {
        applyFill: ((drawingData: DrawingData) => void);
        clearCanvas: (() => void);
        drawStroke: ((drawingData: DrawingData) => void);
        floodFill: ((startX: number, startY: number, color: string, inkRemaining: number, options?: {
            dryRun?: boolean;
        }) => {
            pixelCount: number;
        });
        getCurrentStyle: (() => StrokeStyle);
        redrawCanvas: (() => void);
        renderStroke: ((drawingData: DrawingData) => 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, color: string, inkRemaining: number, options?: {
          dryRun?: boolean;
      }) => {
          pixelCount: number;
      })
        • (startX, startY, color, inkRemaining, options?): {
              pixelCount: number;
          }

        • Parameters

          • startX: number
          • startY: number
          • color: string
          • inkRemaining: number
          • options: {
                dryRun?: boolean;
            } = {}
            • OptionaldryRun?: boolean

          Returns {
              pixelCount: number;
          }

          • pixelCount: number
    • getCurrentStyle: (() => StrokeStyle)
        • (): StrokeStyle

        • Returns StrokeStyle

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

        • Returns void

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

        • Parameters

          • drawingData: DrawingData

          Returns void

Settings

Member Visibility