openpencil/packages/docs/de/programmable/sdk/api/composables/use-canvas-input.md
Danila Poyarkov 14325280d9 docs(i18n): translate all missing pages to 6 languages
- 78 SDK pages per language (components, composables, advanced API,
  guides, architecture, getting-started)
- vector-edit.md user guide page (5 languages)
- Update stale ru/programmable/cli/inspecting.md
- Fix YAML frontmatter quoting for colons in descriptions

474 files, 0 missing pages across de/es/fr/it/pl/ru.
VitePress build verified — all 546 SDK pages render.
2026-04-22 18:35:22 +03:00

1.3 KiB

title description
useCanvasInput Canvas-Zeigereingabe, Ziehen, Auswahl, Größenänderung, Rotation und Werkzeugverhalten verdrahten.

useCanvasInput

useCanvasInput() verbindet Zeiger- und Mausinteraktion mit dem Editor-Canvas.

Es behandelt Interaktionsbelange wie:

  • Auswahl
  • Ziehen
  • Größenänderung
  • Rotation
  • Schwenken
  • Stift-/Zeichenflows
  • Textbearbeitungsinteraktion
  • scope-bewusstes Hit-Testing

Verwendung

Dieses Composable wird typischerweise mit useCanvas() und Hit-Test-Hilfsmitteln des Renderers kombiniert.

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

Einfaches Beispiel

const canvas = useCanvas(canvasRef, editor)

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

Praktische Beispiele

Cursorbewegung im Canvas-Koordinatenraum verfolgen

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

Hinweise

Dieses Composable ist auf niedrigerem Level als die meiste Panel-Logik. Es eignet sich am besten für Editor-Shells und Canvas-Container.

Verwandte APIs