Теперь, когда библиотека 2D-графики Skia доступна в React Native, у нас есть так много возможностей для создания приложений с интенсивным использованием графики, которые раньше были невозможны. Моей личной целью на какое-то время было изучить React Native Gesture Handler, затем Skia пересекла мой радар, и я тоже захотел получить некоторый опыт работы с ним. Мне пришла в голову идея создать экспериментальное приложение для рисования от руки, которое фиксирует ввод пользователя с помощью обработчика жестов и рисует его на компоненте холста с помощью RN Skia. В этой статье рассматриваются основы запуска и запуска этого приложения.

Начало работы с обработчиком жестов React Native

Первым шагом в этом проекте является понимание API RN Gesture Handler. Вы можете прочитать об этом более подробно в Документации Software Mansion, но это довольно просто. Вот как выглядит базовый компонент:

Мы оборачиваем компонент, из которого хотим захватывать жесты, в <GestureDetector> и передаем свойство gesture для типа жеста, на который мы хотим реагировать. Эта поддержка принимает форму объекта Gesture, который мы настраиваем с помощью кода, который мы хотим запускать при возникновении определенных событий (когда жест начинается, обновляется и заканчивается). Если вы хотите реагировать на несколько типов жестов, просто оберните свой компонент дополнительным<GestureDetector> для каждого типа жестов.

В приведенной выше записи обратите внимание, как onTouchesMove вызывается перед onStart и onUpdate. Он вызывается каждый раз при перемещении ввода, независимо от того, был ли распознан жест. Обработчик жестов запускает onStart и onUpdate только после того, как движение было распознано как жест. Это различие будет иметь отношение к нашему приложению для рисования!

Понимание основ Canvas в RN Skia

Если вы работали с 2D-графикой, такой как SVG, в прошлом, эти концепции должны быть вам знакомы. В любом случае, их легко подобрать. Холст реализует систему координат XY, которую мы используем для рисования нашей графики. По умолчанию координаты 0, 0 находятся в верхнем левом углу холста. Ось X перемещается слева направо, а ось Y — вверх и вниз.

React Native Skia предоставляет нам множество удобных способов рисования на холсте. Например, если вы хотите использовать компонент Path для рисования линии, вы можете использовать классическую нотацию пути SVG и передать значение вашему компоненту в виде строки. Кроме того, вы можете использовать объект Skia Path для построения пути точка за точкой.

Понимание того, как работает нотация SVG в предыдущем примере, имеет решающее значение для понимания приложения, которое мы создадим. Вам обязательно следует прочитать статью MDN на эту тему, но убедитесь, что вы понимаете хотя бы эти две вещи:

  • Инструкции с синтаксисом M {xCoordinate} {yCoordinate} говорят холсту «переместиться» в предоставленные координаты; эта инструкция сама по себе ничего не рисует, но предоставляет начальные координаты для следующей операции.
  • Инструкции с синтаксисом L {xCoordinate} {yCoordinate} сообщают холсту, что нужно нарисовать линию от его текущей позиции до предоставленных координат.

Мы также можем очень легко рисовать фигуры на нашем холсте. Вот как мы рисуем круги, например:

Наконец, используя компонент ImageSvg из React Native Skia, мы можем нарисовать любой произвольный SVG на наш холст, включая те, которые мы импортируем из внешних источников.

Рисование с помощью обработчика жестов и Skia

Теперь, когда мы понимаем основы Gesture Handler и Skia, мы готовы объединить эти две концепции и начать рисовать!

Мы создадим функцию рисования от руки, которая собирает данные о жестах панорамирования пользователя и использует их для рисования путей на холсте Skia. На самом деле это намного проще, чем может показаться на первый взгляд, если вы помните следующие концепции:

  • Обработчик жестов Gesture.Pan.onUpdate() будет запускать нашу функцию обратного вызова, когда пользователь перемещает палец, каждый раз предоставляя нам новые координаты пальца пользователя.
  • Пути Skia могут быть определены с использованием нотации SVG, которая может включать серию операторов L {xCoord} {yCoord} для рисования линий.

Помня об этих принципах, проверьте этот компонент:

Наиболее важными для понимания частями этого компонента являются строки 25 и 32.

  • На 25, когда обработчик жестов обнаруживает начало жеста, мы помещаем новый объект пути в наш массив paths. Этот объект имеет массив с именем segments, который будет содержать список инструкций нотации SVG для рисования этого пути. Первоначально мы создаем команду «переместить», чтобы начать наш путь в начальных координатах нашего жеста.
  • Каждый раз, когда жест обновляется, мы помещаем новый сегмент пути в наш массив (строка 32). Эти сегменты содержат команду в нотации SVG для рисования линии с обновленными координатами.

Затем мы просто сопоставляем значения в paths внутри нашего холста, чтобы нарисовать их. Свойство path для каждого компонента Path создается путем объединения каждой строки сегмента, чтобы сформировать допустимую нотацию SVG.

Вот оно! Менее чем из 60 строк кода мы создали базовый компонент для рисования рук с помощью React Native Gesture Handler и Skia. Мощь и потенциал этих двух библиотек в совокупности действительно впечатляют меня. Я надеюсь, что вы чувствуете то же самое!

Загляните в мой репозиторий RN Skia Draw на GitHub, чтобы найти готовое к установке приложение Expo, которое демонстрирует эти принципы, а также показывает, как прикреплять изображения звезд SVG, показанные выше, к Canvas с помощью жеста Tap!

Как всегда, следите за мной здесь, на Medium и в Твиттере @useRNRocket, чтобы узнать больше о React Native! Пишите мне с любыми комментариями, вопросами или исправлениями.