Отказ от отговорност: кодът, показан в тази публикация, е от 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.
И това е!