useCanvasInput

useCanvasInput() connecte les interactions pointeur et souris au canvas de l'éditeur.

Il gère les préoccupations d'interaction comme :

• la sélection
• le glissement
• le redimensionnement
• la rotation
• le panoramique
• les flux de dessin au stylo
• l'interaction de l'édition de texte
• le test de collision sensible à la portée

Utilisation

Ce composable est généralement associé à useCanvas() et aux helpers de test de collision du renderer.

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

Exemple de base

const canvas = useCanvas(canvasRef, editor)

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

Exemples pratiques

Suivre le mouvement du curseur dans l'espace canvas

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

Notes

Ce composable est plus bas niveau que la plupart des logiques de panneau. Il est mieux adapté aux shells d'éditeur et aux conteneurs canvas.

API associées

• useCanvas
• useEditor