Отказ от отговорност: кодът, показан в тази публикация, е от 2019 г. Той използва Pixi версия 4, така че вероятно има по-добри начини за правене на нещата сега с версии 5 и 6. Все още смятам, че кодът е валиден като пример или ръководство за това как да работите с Pixi заедно с React.

PixiJS е библиотека за изобразяване на различни платформи с отворен код за създаване на интерактивни графични изживявания, като игрииготини анимации.

В момента на писане на тази публикация, последната версия е v6.0.2. Документацията може да бъде намерена тук: http://pixijs.download/release/docs/index.html

Ще използваме пакет, който смесва React и PixiJS, наречен react-pixi-fiber, който поддържа както v4, така и v5 на PixiJS, но очевидно все още не и v6.

Заден план

Предполагам, че сте инсталирали react-pixi-fiber и проектът работи. Ако това не е така, можете да следвате „официалната документация“, която е доста ясна.

Има много UI библиотеки за PixiJS, които могат да включват прост плъзгащ компонент. Истината е, че не можах да намеря библиотека, която да работи добре с react-pixi-fiber по това време (вижте отказ от отговорност в началото на тази публикация). Така че в крайна сметка създадох някои UI компоненти за проект: плъзгач, бутон, някои диаграми (лента и пай), лента за напредъка, между другото.

В тази публикация бих искал да ви покажа как да създадете плъзгащ се компонент.

Това, което можете да видите в GIF изображението по-горе, е това, което ще направим. Цветовете и формите са основни, но искам да ви покажа как работи и след това можете да го стилизирате според вашите нужди.

Компонентът ще има 3 файла:

  • файл с фон, който е фон на слайдера (тъмно син на GIF изображението);
  • файл с бутон, който е бутонът, който плъзгаме от едно място на друго (светло син);
  • и индекс файл, който ще обедини всичко това.

Покажи ми кода

Първо, ще създадем директория, наречена Slider. В тази директория ще поставим нашите 3 файла.

Slider
  ├── Background.js
  ├── Button.js
  └── index.js

Background.js

Това е нашият фонов файл.

За този фонов компонент ние използваме CustomPIXIComponent от react-pixi-fiber.

Чертаем правоъгълник на ред 14, а на ред 17 правим фона да може да се кликва, така че да можем да преместим частта с бутона само като щракнем върху фона.

И накрая, на ред 18 прикачваме манипулатор за pointerdown действие, което ще извиква onPointerDown всеки път, когато потребителят кликне върху компонента.

Button.js

Бутонът е малко по-сложен, защото управлява функцията плъзгане и пускане.

Отново използваме CustomPIXIComponent от react-pixi-fiber.

За този компонент сме задали множество манипулатори:

  • pointerdown,ред 49, управлява щракването върху компонента, за да започне плъзгане;
  • pointerup, ред 50, обработва изпускането на компонента, което означава, че плъзгането приключва;
  • pointerupoutside, ред 51, обработва изпускането на компонента извън областта на неговия родител;
  • pointermove, ред 52,обработва плъзгането на компонента от едно място на друго.

На ред 61 проверяваме дали компонентът е монтиран. Ако случаят е такъв, задаваме начална позиция за бутона (тази начална стойност вероятно ще идва от състоянието на приложението).

Index.js

И не на последно място имаме индексния файл.

Тук си струва да споменем няколко неща:

  • width prop е ширината на фона, която всъщност е ширината на целия компонент;
  • btnWidth prop е ширината на бутона;
  • onChange prop е обратното извикване на компонента;
  • steps prop е броят части, на които искаме да разделим плъзгача. Използваме 10 по подразбиране, така че в този случай 0 е минималната стойност, а 10 е максималната стойност.

Така че нека да видим как е реализиран този компонент:

Импортирахме компонента на ред 4 и го използваме на ред 23.

И това е!