useCanvasInput

useCanvasInput() connette le interazioni del puntatore e del mouse al canvas dell'editor.

Gestisce aspetti delle interazioni come:

• selezione
• trascinamento
• ridimensionamento
• rotazione
• panoramica
• flussi penna/disegno
• interazione per la modifica del testo
• hit testing consapevole dello scope

Utilizzo

Questo composable viene tipicamente abbinato a useCanvas() e agli helper di hit-test del renderer.

useCanvasInput(
  canvasRef,
  editor,
  hitTestSectionTitle,
  hitTestComponentLabel,
  hitTestFrameTitle,
)

Esempio base

const canvas = useCanvas(canvasRef, editor)

useCanvasInput(
  canvasRef,
  editor,
  canvas.hitTestSectionTitle,
  canvas.hitTestComponentLabel,
  canvas.hitTestFrameTitle,
)

Esempi pratici

Traccia il movimento del cursore nello spazio canvas

useCanvasInput(
  canvasRef,
  editor,
  hitTestSectionTitle,
  hitTestComponentLabel,
  hitTestFrameTitle,
  (cx, cy) => {
    console.log(cx, cy)
  },
)

Note

Questo composable è di livello inferiore rispetto alla maggior parte della logica dei pannelli. È più adatto per le shell dell'editor e i contenitori canvas.

API correlate

• useCanvas
• useEditor