spin wheel
5.0.2
Простой в использовании тематический компонент для рандомизации выбора и призов.
onSpin и onCurrentIndexChange . import { Wheel } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/spin-wheel-esm.js' ; < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/spin-wheel-iife.js " > </ script >npm install spin-wheel // 1. Configure the wheel's properties:
const props = {
items : [
{
label : 'one' ,
} ,
{
label : 'two' ,
} ,
{
label : 'three' ,
} ,
]
}
// 2. Decide where you want it to go:
const container = document . querySelector ( '.wheel-container' ) ;
// 3. Create the wheel in the container and initialise it with the props:
const wheel = new Wheel ( container , props ) ; Для многопользовательских игр или вручения призов реальной стоимости лучше всего вызвать Wheel.spinToItem() . Колесо будет вращаться в течение определенного времени, и после завершения указатель будет указывать на указанный элемент. Вы всегда должны рассчитывать выигрышный элемент на серверной стороне, например:
const winningItemIndex = await fetchWinningItemIndex ( ) ;
const duration = 4000 ;
const easing = easing . cubicOut ;
wheel . spinToItem ( winningItemIndex , duration , true , 2 , 1 , easing ) Если точность не важна, вы можете использовать Wheel.spin() , чтобы немедленно начать вращать колесо с определенной скоростью, которая со временем будет уменьшаться в соответствии с Wheel.rotationResistance . Вы также можете установить Wheel.isInteractive = true , чтобы позволить пользователю самостоятельно вращать колесо, перетаскивая или щелкая его.
У колеса нет встроенного указателя, вместо этого вы устанавливаете Wheel.pointerAngle и рисуете указатель самостоятельно. Это связано с тем, что существует множество способов отображения и поведения указателя, например, вы можете захотеть анимировать его.
Варианты рисования указателя:
Wheel.overlayImage Изображения передаются как экземпляры HTMLImageElement и должны быть предварительно загружены, иначе произойдет начальная задержка (или мерцание) во время их загрузки браузером. По той же причине шрифты также должны быть предварительно загружены. См. код примера тем, чтобы узнать, как предварительно загружать изображения и шрифты.
Все легко настроить. Колесо реагирует и автоматически изменяет размер в соответствии с размером контейнера, поэтому при изменении размера контейнера вам не придется беспокоиться об обновлении таких неудобных вещей, как ширина и размер шрифта. По этой причине некоторые числовые свойства выражаются в процентах, а другие — в пикселях.
Процентные свойства представляют собой процент от размера контейнера. Например, значение Wheel.radius , равное 0.9 , означает, что колесо заполнит 90% контейнера.
Свойства пикселей относятся к размеру контейнера 500px . Например, Wheel.LineWidth , равный 1 будет равен ровно 1px , когда размер контейнера равен 500px .
Ярлыки также легко настроить, поскольку размер шрифта рассчитывается автоматически. При желании вы можете установить Wheel.itemLabelFontSizeMax (в пикселях), но в противном случае размер самой большой метки элемента будет соответствовать размеру между Wheel.itemLabelRadius (проценты) и Wheel.itemLabelRadiusMax (проценты).
Вот удобная схема:
Wheel| Метод | Описание |
|---|---|
constructor(container, props = {}) | Создайте колесо внутри контейнера Element и инициализируйте его с помощью реквизита. |
init(props = {}) | Инициализируйте все свойства. Если для свойства не указано значение, ему будет присвоено значение по умолчанию. |
resize() | [Устаревшее] Пересчитать и перерисовать колесо. Требуется только в определенных сценариях для старых браузеров, которые не поддерживают ResizeObserver. |
remove() | Удалите колесо из DOM и отмените регистрацию обработчиков событий. |
spin(rotationSpeed = 0) | Вращайте колесо, установив rotationSpeed . Колесо сразу же начнет вращаться и со временем замедляться в зависимости от значения rotationResistance .Положительное число будет вращаться по часовой стрелке, отрицательное — против часовой стрелки. |
spinTo(rotation = 0, duration = 0, easingFunction = null) | Вращайте колесо до определенного вращения. Анимация будет происходить в течение заданного Анимацию можно настроить, предоставив дополнительную функцию Если функция плавности не указана, будет использоваться EasySinOut по умолчанию. Например, функции смягчения см. в разделе easing-utils. |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | Вращайте колесо до определенного предмета. Анимация будет происходить в течение заданного Если Анимацию можно настроить, предоставив дополнительную функцию Если функция плавности не указана, будет использоваться EasySinOut по умолчанию. Например, функции смягчения см. в разделе easing-utils. |
stop() | Немедленно прекратите вращение колеса, независимо от того, какой метод был использован для его вращения. |
getCurrentIndex() | Получите индекс элемента, на который указывает указатель. Элемент считается «текущим», если |
Wheel Примечание. Если для свойства установлено значение undefined оно будет сброшено до значения по умолчанию.
| Имя | Значение по умолчанию | Описание |
|---|---|---|
borderColor | '#000' | Цвет CSS для линии по окружности колеса. |
borderWidth | 0 | Ширина (в пикселях) линии по окружности колеса. |
debug | false | Если будет показана информация об отладке. Это полезно при размещении меток. |
image | null | HTMLImageElement для рисования на колесе и вращения вместе с ним. Он будет отцентрирован и масштабирован в соответствии с |
isInteractive | true | Если пользователю будет разрешено вращать колесо с помощью щелчка-перетаскивания/прикосновения-пролистывания. Взаимодействие с пользователем будет обнаружено только в пределах |
itemBackgroundColors | ['#fff'] | Цвета CSS, которые будут использоваться в качестве повторяющегося шаблона для цветов фона всех элементов. Переопределяется Пример: |
itemLabelAlign | 'right' | Выравнивание всех меток элементов. Возможные значения: |
itemLabelBaselineOffset | 0 | Смещение базовой линии (или высоты строки) всех меток элементов (в процентах от высоты метки). |
itemLabelColors | ['#000'] | Цвета CSS, которые будут использоваться в качестве повторяющегося шаблона для цветов всех меток элементов. Переопределяется Пример: |
itemLabelFont | 'sans-serif' | Семейство шрифтов, которое будет использоваться для всех меток элементов. Пример: |
itemLabelFontSizeMax | 100 | Максимальный размер шрифта (в пикселях) для всех меток элементов. |
itemLabelRadius | 0.85 | Точка по радиусу колеса (в процентах, начиная с центра), для начала рисования надписей всех элементов. |
itemLabelRadiusMax | 0.2 | Точка вдоль радиуса колеса (в процентах, начиная с центра), ограничивающая максимальную ширину всех надписей элементов. |
itemLabelRotation | 0 | Поворот всех меток элементов. Используйте это в сочетании с itemLabelAlign , чтобы перевернуть метки 180° . |
itemLabelStrokeColor | '#fff' | Цвет CSS обводки, применяемой к внешней стороне текста метки. |
itemLabelStrokeWidth | 0 | Ширина обводки, применяемой к внешней стороне текста метки. |
items | [] | Предметы (или ломтики, клинья, сегменты) показаны на колесе. Установка этого свойства заново создаст все элементы на колесе на основе предоставленных объектов. Доступ к этому свойству позволяет изменять отдельные элементы. Например, вы можете изменить цвет фона элемента. |
lineColor | '#000' | Цвет CSS линий между элементами. |
lineWidth | 1 | Ширина (в пикселях) линий между элементами. |
offset | {x: 0, y: 0} | Смещение колеса от центра контейнера (в процентах от диаметра колеса). |
onCurrentIndexChange | null | Обратный вызов для события onCurrentIndexChange . |
onRest | null | Обратный вызов для события onRest . |
onSpin | null | Обратный вызов для события onSpin . |
overlayImage | null | HTMLImageElement для рисования поверх колеса. Он будет центрирован и масштабирован в соответствии с наименьшими размерами контейнера. Используйте его, чтобы нарисовать украшения вокруг колеса, например подставку или указку. |
pixelRatio | 0 | Соотношение пикселей (в процентах), используемое для рисования колеса. Более высокие значения дают более четкое изображение за счет производительности, но резкость зависит от текущего устройства отображения. Значение |
pointerAngle | 0 | Угол указателя, который будет использоваться для определения currentIndex (или «выигрышного» элемента). |
radius | 0.95 | Радиус колеса (в процентах от наименьшего размера контейнера). |
rotation | 0 | Поворот (угол в градусах) колеса. От этой точки первый элемент будет нарисован по часовой стрелке. |
rotationResistance | -35 | Величина, на которую rotationSpeed будет уменьшаться каждую секунду, пока колесо не перестанет вращаться. Установите значение |
rotationSpeed | 0 | [Только для чтения] Насколько быстро (угол в градусах) колесо вращается каждую 1 секунду. Положительное число означает, что колесо вращается по часовой стрелке, отрицательное число означает против часовой стрелки, а |
rotationSpeedMax | 250 | Максимальное абсолютное значение для rotationSpeed .Колесо не будет вращаться быстрее этого значения в любом направлении. |
WheelonCurrentIndexChange(event = {})Возникает при указании на новый элемент. Это можно использовать для изменения цвета текущего элемента или воспроизведения тикающего звука.
| Ключ | Ценить |
|---|---|
type | 'currentIndexChange' |
currentIndex | Индекс элемента, на который указывал указатель. См. |
onRest(event = {})Поднимается, когда колесо после вращения останавливается.
| Ключ | Ценить |
|---|---|
type | 'rest' |
currentIndex | Индекс элемента, на который указывал указатель. См. |
rotation | Вращение колеса. См |
onSpin(event = {})Поднимается при вращении колеса.
| Ключ | Ценить |
|---|---|
type | 'spin' |
duration | Продолжительность анимации вращения. Предоставляется только в том случае, если method = spinto или method = spintoitem . |
method | Метод, который использовался для вращения колеса ( interact , spin , spinto , spintoitem ). |
rotationResistance | Значение Wheel.rotationResistance на момент возникновения события. Предоставляется только в том случае, если |
rotationSpeed | Значение Wheel.rotationSpeed на момент возникновения события. Предоставляется только в том случае, если |
targetItemIndex | Элемент, на который будет указывать указатель после завершения анимации вращения. Предоставляется только в том случае, если |
targetRotation | Значение, которое Wheel.rotation будет иметь после завершения анимации вращения. Предоставляется только в том случае, если |
Item| Имя | Описание |
|---|---|
getCenterAngle() | Получите угол (в градусах), которым заканчивается этот элемент (исключая), игнорируя текущее rotation колеса. |
getEndAngle() | Получите угол (в градусах), которым заканчивается этот элемент (включительно), игнорируя текущее rotation колеса. |
getIndex() | Получите индекс этого элемента, отсчитываемый от 0. |
getRandomAngle() | Возвращает случайный угол (в градусах) между начальным углом этого элемента (включительно) и конечным углом (включительно). |
getStartAngle() | Получите угол (в градусах), с которого начинается этот элемент (включительно), игнорируя текущее rotation колеса. |
init(props = {}) | Инициализируйте все свойства. Если значение неопределенное или недопустимое, для этого свойства будет установлено значение по умолчанию. |
Item Примечание. Если для свойства установлено значение undefined оно будет сброшено до значения по умолчанию.
| Имя | Значение по умолчанию | Описание |
|---|---|---|
backgroundColor | null | Цвет CSS фона элемента. Если Пример: |
image | null | HTMLImageElement для рисования на элементе. Любая часть изображения, выходящая за пределы элемента, будет обрезана. Изображение будет нарисовано поверх |
imageOpacity | 1 | Непрозрачность (в процентах) Item.image .Полезно, если вы хотите затемнить изображение, чтобы выделить этикетку предмета. |
imageRadius | 0.5 | Точка вдоль радиуса колеса (в процентах, начиная с центра), для рисования центра Item.image . |
imageRotation | 0 | Поворот (угол в градусах) Item.image . |
imageScale | 1 | Масштаб (размер в процентах) Item.image . |
label | '' | Текст, который будет нарисован на элементе. |
labelColor | null | Цвет CSS метки элемента. Если Пример: |
value | null | Некоторое значение, имеющее значение для вашего приложения. Например, ссылка на объект, представляющий элемент на колесе, или идентификатор базы данных. |
weight | 1 | Пропорциональный размер предмета относительно других предметов на колесе. Например, если у вас есть 2 предмета, где |
Вдохновлен случайным колесом.
