useCanvasInput

useCanvasInput() подключает взаимодействия указателя и мыши к холсту редактора.

Обрабатывает:

• выделение
• перетаскивание
• изменение размера
• поворот
• перемещение видимой области холста;
• рисование с помощью Pen tool;
• взаимодействие в режиме редактирования текста;
• hit testing с учётом текущей видимой области.

Использование

Обычно этот composable используют вместе с useCanvas() и функциями hit testing, которые предоставляет renderer.

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

Базовый пример

const canvas = useCanvas(canvasRef, editor)

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

Практические примеры

Отслеживание движения курсора в пространстве холста

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

Примечания

Этот composable относится к низкоуровневому API. Он предназначен прежде всего для компонентов, в которых размещён холст, и для собственных интерфейсов редактора.

Связанные API

• useCanvas
• useEditor