74 lines
1.9 KiB
Markdown
74 lines
1.9 KiB
Markdown
|
---
|
|||
|
|
title: useCanvasInput
|
|||
|
|
description: Подключение ввода указателя, перетаскивания, выделения, изменения размера, поворота и инструментов к холсту.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# useCanvasInput
|
|||
|
|
|
|||
|
|
`useCanvasInput()` подключает взаимодействия указателя и мыши к холсту редактора.
|
|||
|
|
|
|||
|
|
Обрабатывает:
|
|||
|
|
|
|||
|
|
- выделение
|
|||
|
|
- перетаскивание
|
|||
|
|
- изменение размера
|
|||
|
|
- поворот
|
|||
|
|
- прокрутку (panning)
|
|||
|
|
- потоки рисования пером
|
|||
|
|
- взаимодействие при редактировании текста
|
|||
|
|
- хит-тестирование с учётом области видимости
|
|||
|
|
|
|||
|
|
## Использование
|
|||
|
|
|
|||
|
|
Этот компосабл обычно используется вместе с `useCanvas()` и хелперами хит-тестирования от рендерера.
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
useCanvasInput(
|
|||
|
|
canvasRef,
|
|||
|
|
editor,
|
|||
|
|
hitTestSectionTitle,
|
|||
|
|
hitTestComponentLabel,
|
|||
|
|
hitTestFrameTitle,
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Базовый пример
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
const canvas = useCanvas(canvasRef, editor)
|
|||
|
|
|
|||
|
|
useCanvasInput(
|
|||
|
|
canvasRef,
|
|||
|
|
editor,
|
|||
|
|
canvas.hitTestSectionTitle,
|
|||
|
|
canvas.hitTestComponentLabel,
|
|||
|
|
canvas.hitTestFrameTitle,
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Практические примеры
|
|||
|
|
|
|||
|
|
### Отслеживание движения курсора в пространстве холста
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
useCanvasInput(
|
|||
|
|
canvasRef,
|
|||
|
|
editor,
|
|||
|
|
hitTestSectionTitle,
|
|||
|
|
hitTestComponentLabel,
|
|||
|
|
hitTestFrameTitle,
|
|||
|
|
(cx, cy) => {
|
|||
|
|
console.log(cx, cy)
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Примечания
|
|||
|
|
|
|||
|
|
Этот компосабл более низкоуровневый, чем большинство логики панелей. Лучше всего подходит для оболочек редактора и контейнеров холста.
|
|||
|
|
|
|||
|
|
## Связанные API
|
|||
|
|
|
|||
|
|
- [useCanvas](./use-canvas)
|
|||
|
|
- [useEditor](./use-editor)
|