spin wheel
5.0.2
Un componente temático fácil de usar para seleccionar opciones y premios al azar.
onSpin y 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 ) ; Para juegos multijugador o para otorgar premios con valor real, la mejor manera es llamar a Wheel.spinToItem() . La rueda girará durante un tiempo determinado y, una vez terminada, el puntero apuntará al elemento especificado. Siempre debes calcular el artículo ganador en el back-end, por ejemplo:
const winningItemIndex = await fetchWinningItemIndex ( ) ;
const duration = 4000 ;
const easing = easing . cubicOut ;
wheel . spinToItem ( winningItemIndex , duration , true , 2 , 1 , easing ) Si la precisión no es importante, puede usar Wheel.spin() para comenzar inmediatamente a girar la rueda a una velocidad determinada, que se reducirá con el tiempo según Wheel.rotationResistance . También puede configurar Wheel.isInteractive = true para permitir que el usuario haga girar la rueda arrastrándola o girándola.
La rueda no tiene un puntero incorporado; en su lugar, configura Wheel.pointerAngle y dibuja el puntero usted mismo. Esto se debe a que hay muchas formas en las que puede desear que aparezca y se comporte el puntero; por ejemplo, es posible que desee animarlo.
Sus opciones para dibujar el puntero son:
Wheel.overlayImage Las imágenes se pasan como instancias de HTMLImageElement y deben cargarse previamente; de lo contrario, habrá un retraso inicial (o un parpadeo) mientras el navegador las descarga. Las fuentes también deben estar precargadas por el mismo motivo. Consulte el código detrás del ejemplo de temas para ver un ejemplo de cómo precargar imágenes y fuentes.
Todo es fácil de configurar. La rueda responde y cambia de tamaño automáticamente para adaptarse a su contenedor, por lo que cuando el tamaño del contenedor cambia no tiene que preocuparse por actualizar cosas complicadas como anchos y tamaños de fuente. Por ese motivo, algunas propiedades numéricas se expresan como porcentajes, mientras que otras se expresan como píxeles.
Las propiedades porcentuales son un porcentaje del tamaño del contenedor. Por ejemplo, un Wheel.radius de 0.9 significa que la rueda llenará 90% del contenedor.
Las propiedades de los píxeles son relativas a un tamaño de contenedor de 500px . Por ejemplo, un Wheel.LineWidth de 1 será exactamente 1px cuando el tamaño del contenedor sea 500px .
Las etiquetas también son sencillas de configurar porque el tamaño de fuente se calcula automáticamente. Opcionalmente, puede configurar Wheel.itemLabelFontSizeMax (en píxeles), pero de lo contrario, la etiqueta del elemento más grande tendrá un tamaño que se ajuste entre Wheel.itemLabelRadius (porcentaje) y Wheel.itemLabelRadiusMax (porcentaje).
Aquí hay un diagrama útil:
Wheel| Método | Descripción |
|---|---|
constructor(container, props = {}) | Cree la rueda dentro de un elemento contenedor e inicialícela con accesorios. |
init(props = {}) | Inicialice todas las propiedades. Si no se proporciona un valor para una propiedad, se le asignará un valor predeterminado. |
resize() | [Legacy] Vuelve a calcular y dibujar la rueda. Solo es necesario en ciertos escenarios para navegadores antiguos que no admiten ResizeObserver. |
remove() | Retire la rueda del DOM y cancele el registro de los controladores de eventos. |
spin(rotationSpeed = 0) | Gira la rueda configurando rotationSpeed . La rueda comenzará a girar inmediatamente y disminuirá su velocidad con el tiempo dependiendo del valor de rotationResistance .Un número positivo girará en el sentido de las agujas del reloj, un número negativo girará en el sentido contrario a las agujas del reloj. |
spinTo(rotation = 0, duration = 0, easingFunction = null) | Gira la rueda a una rotación particular. La animación se producirá durante la La animación se puede ajustar proporcionando una Si no se proporciona ninguna función de aceleración, se utilizará la función easySinOut predeterminada. Por ejemplo, funciones de aceleración, consulte easing-utils. |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | Gira la rueda hacia un elemento en particular. La animación se producirá durante la Si La animación se puede ajustar proporcionando una Si no se proporciona ninguna función de aceleración, se utilizará la función easySinOut predeterminada. Por ejemplo, funciones de aceleración, consulte easing-utils. |
stop() | Detenga inmediatamente el giro de la rueda, independientemente del método utilizado para hacerlo girar. |
getCurrentIndex() | Obtenga el índice del elemento al que apunta el puntero. Un elemento se considera "actual" si |
Wheel Nota: establecer una propiedad como undefined la restablecerá al valor predeterminado.
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
borderColor | '#000' | El color CSS de la línea alrededor de la circunferencia de la rueda. |
borderWidth | 0 | El ancho (en píxeles) de la línea alrededor de la circunferencia de la rueda. |
debug | false | Si se mostrará información de depuración. Esto resulta útil a la hora de colocar etiquetas. |
image | null | HTMLImageElement para dibujar en la rueda y rotar con la rueda. Estará centrado y escalado para ajustarse |
isInteractive | true | Si al usuario se le permitirá girar la rueda haciendo clic-arrastrar/tocar-deslizar. La interacción del usuario solo se detectará dentro de los límites de |
itemBackgroundColors | ['#fff'] | Los colores CSS que se utilizarán como patrón repetido para los colores de fondo de todos los elementos. Anulado por Ejemplo: |
itemLabelAlign | 'right' | La alineación de todas las etiquetas de los elementos. Valores posibles: |
itemLabelBaselineOffset | 0 | El desplazamiento de la línea base (o altura de la línea) de todas las etiquetas de elementos (como porcentaje de la altura de la etiqueta). |
itemLabelColors | ['#000'] | Los colores CSS que se utilizarán como patrón repetido para los colores de todas las etiquetas de elementos. Anulado por Ejemplo: |
itemLabelFont | 'sans-serif' | La familia de fuentes que se utilizará para todas las etiquetas de elementos. Ejemplo: |
itemLabelFontSizeMax | 100 | El tamaño de fuente máximo (en píxeles) para todas las etiquetas de elementos. |
itemLabelRadius | 0.85 | El punto a lo largo del radio de la rueda (como porcentaje, comenzando desde el centro) para comenzar a dibujar todas las etiquetas de los elementos. |
itemLabelRadiusMax | 0.2 | El punto a lo largo del radio de la rueda (como porcentaje, comenzando desde el centro) para limitar el ancho máximo de todas las etiquetas de elementos. |
itemLabelRotation | 0 | La rotación de todas las etiquetas de los elementos. Úselo en combinación con itemLabelAlign para voltear las etiquetas 180° . |
itemLabelStrokeColor | '#fff' | El color CSS del trazo aplicado al exterior del texto de la etiqueta. |
itemLabelStrokeWidth | 0 | El ancho del trazo aplicado al exterior del texto de la etiqueta. |
items | [] | Los elementos (o rebanadas, porciones, segmentos) que se muestran en la rueda. Establecer esta propiedad recreará todos los elementos de la rueda en función de los objetos proporcionados. Acceder a esta propiedad le permite cambiar elementos individuales. Por ejemplo, podrías cambiar el color de fondo de un elemento. |
lineColor | '#000' | El color CSS de las líneas entre los elementos. |
lineWidth | 1 | El ancho (en píxeles) de las líneas entre los elementos. |
offset | {x: 0, y: 0} | El desplazamiento de la rueda desde el centro de su contenedor (como porcentaje del diámetro de la rueda). |
onCurrentIndexChange | null | La devolución de llamada para el evento onCurrentIndexChange . |
onRest | null | La devolución de llamada para el evento onRest . |
onSpin | null | La devolución de llamada para el evento onSpin . |
overlayImage | null | HTMLImageElement que se dibujará sobre la parte superior de la rueda. Estará centrado y escalado para ajustarse a la dimensión más pequeña del contenedor. Úselo para dibujar decoraciones alrededor de la rueda, como un soporte o un puntero. |
pixelRatio | 0 | La proporción de píxeles (como porcentaje) utilizada para dibujar la rueda. Los valores más altos producirán una imagen más nítida a costa del rendimiento, pero la nitidez depende del dispositivo de visualización actual. Un valor de |
pointerAngle | 0 | El ángulo del puntero que se utilizará para determinar el currentIndex (o el elemento "ganador"). |
radius | 0.95 | El radio de la rueda (como porcentaje de la dimensión más pequeña del contenedor). |
rotation | 0 | La rotación (ángulo en grados) de la rueda. El primer elemento se dibujará en el sentido de las agujas del reloj desde este punto. |
rotationResistance | -35 | La cantidad de rotationSpeed se reducirá cada segundo hasta que la rueda deje de girar. Establezca en |
rotationSpeed | 0 | [Solo lectura] Qué tan rápido (ángulo en grados) gira la rueda cada 1 segundo. Un número positivo significa que la rueda gira en el sentido de las agujas del reloj, un número negativo significa en el sentido contrario a las agujas del reloj y |
rotationSpeedMax | 250 | El valor absoluto máximo para rotationSpeed .La rueda no girará más rápido que este valor en ninguna dirección. |
WheelonCurrentIndexChange(event = {})Se genera cuando se apunta a un nuevo elemento. Esto se puede utilizar para cambiar el color del elemento actual o reproducir un sonido de tictac.
| Llave | Valor |
|---|---|
type | 'currentIndexChange' |
currentIndex | El índice del elemento al que apuntaba el puntero. Consulte |
onRest(event = {})Se eleva cuando la rueda se detiene después de girar.
| Llave | Valor |
|---|---|
type | 'rest' |
currentIndex | El índice del elemento al que apuntaba el puntero. Consulte |
rotation | La rotación de la rueda. Consulte |
onSpin(event = {})Se eleva cuando se ha hecho girar la rueda.
| Llave | Valor |
|---|---|
type | 'spin' |
duration | La duración de la animación de giro. Solo se proporciona cuando method = spinto o method = spintoitem . |
method | El método que se utilizó para hacer girar la rueda ( interact , spin , spinto , spintoitem ). |
rotationResistance | El valor de Wheel.rotationResistance en el momento en que se generó el evento. Solo se proporciona cuando |
rotationSpeed | El valor de Wheel.rotationSpeed en el momento en que se generó el evento. Solo se proporciona cuando |
targetItemIndex | El elemento al que apuntará el puntero una vez que finalice la animación de giro. Solo se proporciona cuando |
targetRotation | El valor que tendrá Wheel.rotation una vez finalizada la animación de giro. Solo se proporciona cuando |
Item| Nombre | Descripción |
|---|---|
getCenterAngle() | Obtenga el ángulo (en grados) en el que termina este elemento (exclusivo), ignorando la rotation actual de la rueda. |
getEndAngle() | Obtenga el ángulo (en grados) en el que termina este elemento (inclusive), ignorando la rotation actual de la rueda. |
getIndex() | Obtenga el índice basado en 0 de este elemento. |
getRandomAngle() | Devuelve un ángulo aleatorio (en grados) entre el ángulo inicial (inclusive) y el ángulo final (inclusive) de este elemento. |
getStartAngle() | Obtenga el ángulo (en grados) en el que comienza este elemento (inclusive), ignorando la rotation actual de la rueda. |
init(props = {}) | Inicialice todas las propiedades. Si un valor no está definido o no es válido, esa propiedad volverá a un valor predeterminado. |
Item Nota: establecer una propiedad como undefined la restablecerá al valor predeterminado.
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
backgroundColor | null | El color CSS del fondo del elemento. Cuando es Ejemplo: |
image | null | HTMLImageElement para dibujar en el elemento. Cualquier parte de la imagen que se extienda fuera del elemento se recortará. La imagen se dibujará sobre la parte superior de |
imageOpacity | 1 | La opacidad (como porcentaje) de Item.image .Útil si desea atenuar la imagen para resaltar la etiqueta del artículo. |
imageRadius | 0.5 | El punto a lo largo del radio de la rueda (como porcentaje, comenzando desde el centro) para dibujar el centro de Item.image . |
imageRotation | 0 | La rotación (ángulo en grados) de Item.image . |
imageScale | 1 | La escala (tamaño como porcentaje) de Item.image . |
label | '' | El texto que se dibujará en el elemento. |
labelColor | null | El color CSS de la etiqueta del elemento. Cuando es Ejemplo: |
value | null | Algún valor que tenga significado para su aplicación. Por ejemplo, una referencia al objeto que representa el elemento en la rueda o una identificación de base de datos. |
weight | 1 | El tamaño proporcional del elemento en relación con otros elementos de la rueda. Por ejemplo, si tiene 2 elementos donde |
Inspirado en la rueda aleatoria.
