74 lines
1.3 KiB
Markdown
74 lines
1.3 KiB
Markdown
|
---
|
||
|
|
title: useCanvasInput
|
||
|
|
description: Podłącz wejście wskaźnika kanvasu, przeciąganie, selekcję, zmianę rozmiaru, obrót i zachowanie narzędzi.
|
||
|
|
---
|
||
|
|
|
||
|
|
# useCanvasInput
|
||
|
|
|
||
|
|
`useCanvasInput()` łączy interakcję wskaźnika i myszy z kanwasem edytora.
|
||
|
|
|
||
|
|
Obsługuje zagadnienia interakcji takie jak:
|
||
|
|
|
||
|
|
- selekcja
|
||
|
|
- przeciąganie
|
||
|
|
- zmiana rozmiaru
|
||
|
|
- obrót
|
||
|
|
- przesuwanie
|
||
|
|
- przepływy pióra/rysowania
|
||
|
|
- interakcja edycji tekstu
|
||
|
|
- testy trafień uwzględniające zakres
|
||
|
|
|
||
|
|
## Użycie
|
||
|
|
|
||
|
|
Ten kompozyt jest zazwyczaj parowany z `useCanvas()` i pomocnikami testów trafień z renderera.
|
||
|
|
|
||
|
|
```ts
|
||
|
|
useCanvasInput(
|
||
|
|
canvasRef,
|
||
|
|
editor,
|
||
|
|
hitTestSectionTitle,
|
||
|
|
hitTestComponentLabel,
|
||
|
|
hitTestFrameTitle,
|
||
|
|
)
|
||
|
|
```
|
||
|
|
|
||
|
|
## Podstawowy przykład
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const canvas = useCanvas(canvasRef, editor)
|
||
|
|
|
||
|
|
useCanvasInput(
|
||
|
|
canvasRef,
|
||
|
|
editor,
|
||
|
|
canvas.hitTestSectionTitle,
|
||
|
|
canvas.hitTestComponentLabel,
|
||
|
|
canvas.hitTestFrameTitle,
|
||
|
|
)
|
||
|
|
```
|
||
|
|
|
||
|
|
## Przykłady praktyczne
|
||
|
|
|
||
|
|
### Śledź ruch kursora w przestrzeni kanvasu
|
||
|
|
|
||
|
|
```ts
|
||
|
|
useCanvasInput(
|
||
|
|
canvasRef,
|
||
|
|
editor,
|
||
|
|
hitTestSectionTitle,
|
||
|
|
hitTestComponentLabel,
|
||
|
|
hitTestFrameTitle,
|
||
|
|
(cx, cy) => {
|
||
|
|
console.log(cx, cy)
|
||
|
|
},
|
||
|
|
)
|
||
|
|
```
|
||
|
|
|
||
|
|
## Uwagi
|
||
|
|
|
||
|
|
Ten kompozyt jest niższego poziomu niż większość logiki paneli. Najlepiej nadaje się do powłok edytora i kontenerów kanvasu.
|
||
|
|
|
||
|
|
## Powiązane API
|
||
|
|
|
||
|
|
- [useCanvas](./use-canvas)
|
||
|
|
- [useEditor](./use-editor)
|