spin wheel
5.0.2
Un composant thématique facile à utiliser pour randomiser les choix et les prix.
onSpin et 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 ) ; Pour les jeux multijoueurs ou l'attribution de prix avec une valeur réelle, le meilleur moyen est d'appeler Wheel.spinToItem() . La roue tournera pendant une certaine durée et une fois terminée, le pointeur pointera vers l'élément spécifié. Vous devez toujours calculer l'élément gagnant sur le back-end, par exemple :
const winningItemIndex = await fetchWinningItemIndex ( ) ;
const duration = 4000 ;
const easing = easing . cubicOut ;
wheel . spinToItem ( winningItemIndex , duration , true , 2 , 1 , easing ) Si la précision n'est pas importante, vous pouvez utiliser Wheel.spin() pour commencer immédiatement à faire tourner la roue à une certaine vitesse, qui sera réduite au fil du temps en fonction de Wheel.rotationResistance . Vous pouvez également définir Wheel.isInteractive = true pour permettre à l'utilisateur de faire tourner la roue lui-même en la faisant glisser ou en effleurant.
La roue n'a pas de pointeur intégré, vous définissez plutôt Wheel.pointerAngle et dessinez le pointeur vous-même. En effet, vous pouvez souhaiter que le pointeur apparaisse et se comporte de plusieurs manières, par exemple en l'animant.
Vos options pour dessiner le pointeur sont :
Wheel.overlayImage Les images sont transmises en tant qu'instances de HTMLImageElement et doivent être préchargées, sinon il y aura un délai initial (ou un scintillement) pendant que le navigateur les télécharge. Les polices doivent également être préchargées pour la même raison. Consultez le code derrière l'exemple de thèmes pour un exemple de préchargement d'images et de polices.
Tout est facile à configurer. La roue est réactive et se redimensionne automatiquement pour s'adapter à son conteneur. Ainsi, lorsque la taille du conteneur change, vous n'avez pas à vous soucier de mettre à jour des éléments délicats tels que les largeurs et les tailles de police. Pour cette raison, certaines propriétés numériques sont exprimées en pourcentages, tandis que d’autres sont exprimées en pixels.
Les propriétés en pourcentage correspondent à un pourcentage de la taille du conteneur. Par exemple, un Wheel.radius de 0.9 signifie que la roue remplira 90% du conteneur.
Les propriétés des pixels sont relatives à une taille de conteneur de 500px . Par exemple, un Wheel.LineWidth de 1 sera exactement 1px lorsque la taille du conteneur est 500px .
Les étiquettes sont également simples à configurer car la taille de la police est calculée automatiquement. Vous pouvez éventuellement définir Wheel.itemLabelFontSizeMax (en pixels), mais sinon, la plus grande étiquette d'élément sera dimensionnée pour s'adapter entre Wheel.itemLabelRadius (pour cent) et Wheel.itemLabelRadiusMax (pour cent).
Voici un schéma pratique :
Wheel| Méthode | Description |
|---|---|
constructor(container, props = {}) | Créez la roue à l’intérieur d’un élément conteneur et initialisez-la avec des accessoires. |
init(props = {}) | Initialisez toutes les propriétés. Si aucune valeur n’est fournie pour une propriété, une valeur par défaut lui sera attribuée. |
resize() | [Legacy] Recalculez et redessinez la roue. Nécessaire uniquement dans certains scénarios pour les navigateurs plus anciens qui ne prennent pas en charge ResizeObserver. |
remove() | Retirez la roue du DOM et désenregistrez les gestionnaires d’événements. |
spin(rotationSpeed = 0) | Faites tourner la roue en réglant rotationSpeed . La roue commencera immédiatement à tourner et ralentira au fil du temps en fonction de la valeur de rotationResistance .Un nombre positif tournera dans le sens des aiguilles d’une montre, un nombre négatif tournera dans le sens inverse des aiguilles d’une montre. |
spinTo(rotation = 0, duration = 0, easingFunction = null) | Faites tourner la roue selon une rotation particulière. L'animation se produira sur la L'animation peut être ajustée en fournissant une Si aucune fonction d'assouplissement n'est fournie, la fonction easySinOut par défaut sera utilisée. Par exemple, les fonctions d'assouplissement voir easing-utils. |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | Faites tourner la roue sur un élément particulier. L'animation se produira sur la Si L'animation peut être ajustée en fournissant une Si aucune fonction d'assouplissement n'est fournie, la fonction easySinOut par défaut sera utilisée. Par exemple, les fonctions d'assouplissement voir easing-utils. |
stop() | Arrêtez immédiatement la roue de tourner, quelle que soit la méthode utilisée pour la faire tourner. |
getCurrentIndex() | Obtenez l’index de l’élément sur lequel pointe le pointeur. Un élément est considéré comme « actuel » si |
Wheel Remarque : définir une propriété sur undefined la réinitialisera à sa valeur par défaut.
| Nom | Valeur par défaut | Description |
|---|---|---|
borderColor | '#000' | La couleur CSS de la ligne autour de la circonférence de la roue. |
borderWidth | 0 | La largeur (en pixels) de la ligne autour de la circonférence de la roue. |
debug | false | Si les informations de débogage seront affichées. Ceci est utile lors du positionnement des étiquettes. |
image | null | Le HTMLImageElement à dessiner sur la roue et à faire pivoter avec la roue. Il sera centré et mis à l'échelle pour s'adapter à |
isInteractive | true | Si l'utilisateur est autorisé à faire tourner la roue en utilisant un clic-glisser/toucher-flick. L'interaction de l'utilisateur ne sera détectée que dans les limites de |
itemBackgroundColors | ['#fff'] | Couleurs CSS à utiliser comme motif répétitif pour les couleurs d'arrière-plan de tous les éléments. Remplacé par Exemple : |
itemLabelAlign | 'right' | L’alignement de toutes les étiquettes des articles. Valeurs possibles : |
itemLabelBaselineOffset | 0 | Décalage de la ligne de base (ou hauteur de ligne) de toutes les étiquettes d'éléments (en pourcentage de la hauteur de l'étiquette). |
itemLabelColors | ['#000'] | Couleurs CSS à utiliser comme motif répétitif pour les couleurs de toutes les étiquettes d'éléments. Remplacé par Exemple : |
itemLabelFont | 'sans-serif' | La famille de polices à utiliser pour toutes les étiquettes d’éléments. Exemple : |
itemLabelFontSizeMax | 100 | Taille de police maximale (en pixels) pour toutes les étiquettes d'éléments. |
itemLabelRadius | 0.85 | Point le long du rayon de la roue (en pourcentage, en partant du centre) pour commencer à dessiner toutes les étiquettes des éléments. |
itemLabelRadiusMax | 0.2 | Point le long du rayon de la roue (en pourcentage, en partant du centre) pour limiter la largeur maximale de toutes les étiquettes d'éléments. |
itemLabelRotation | 0 | La rotation de toutes les étiquettes d'éléments. Utilisez-la en combinaison avec itemLabelAlign pour retourner les étiquettes 180° . |
itemLabelStrokeColor | '#fff' | La couleur CSS du trait appliqué à l'extérieur du texte de l'étiquette. |
itemLabelStrokeWidth | 0 | La largeur du trait appliqué à l’extérieur du texte de l’étiquette. |
items | [] | Les éléments (ou tranches, quartiers, segments) affichés sur la roue. La définition de cette propriété recréera tous les éléments de la roue en fonction des objets fournis. L'accès à cette propriété vous permet de modifier des éléments individuels. Par exemple, vous pouvez modifier la couleur d'arrière-plan d'un élément. |
lineColor | '#000' | La couleur CSS des lignes entre les éléments. |
lineWidth | 1 | La largeur (en pixels) des lignes entre les éléments. |
offset | {x: 0, y: 0} | Le décalage de la roue par rapport au centre de son conteneur (en pourcentage du diamètre de la roue). |
onCurrentIndexChange | null | Le rappel pour l'événement onCurrentIndexChange . |
onRest | null | Le rappel pour l'événement onRest . |
onSpin | null | Le rappel pour l'événement onSpin . |
overlayImage | null | HTMLImageElement à dessiner sur le dessus de la roue. Il sera centré et mis à l'échelle pour s'adapter à la plus petite dimension du conteneur. Utilisez-le pour dessiner des décorations autour de la roue, comme un support ou un pointeur. |
pixelRatio | 0 | Le rapport de pixels (en pourcentage) utilisé pour dessiner la roue. Des valeurs plus élevées produiront une image plus nette au détriment des performances, mais la netteté dépend du périphérique d'affichage actuel. Une valeur de |
pointerAngle | 0 | L'angle du Pointeur qui sera utilisé pour déterminer l' currentIndex (ou l'élément "gagnant"). |
radius | 0.95 | Le rayon de la roue (en pourcentage de la plus petite dimension du conteneur). |
rotation | 0 | La rotation (angle en degrés) de la roue. Le premier élément sera dessiné dans le sens des aiguilles d’une montre à partir de ce point. |
rotationResistance | -35 | La quantité de rotationSpeed sera réduite chaque seconde jusqu'à ce que la roue cesse de tourner. Réglez sur |
rotationSpeed | 0 | [Lecture seule] À quelle vitesse (angle en degrés) la roue tourne toutes les secondes. Un nombre positif signifie que la roue tourne dans le sens des aiguilles d'une montre, un nombre négatif signifie dans le sens inverse des aiguilles d'une montre et |
rotationSpeedMax | 250 | La valeur absolue maximale pour rotationSpeed .La roue ne tournera pas plus vite que cette valeur dans les deux sens. |
WheelonCurrentIndexChange(event = {})Déclenché lorsqu'un nouvel élément est pointé. Cela peut être utilisé pour changer la couleur de l'élément actuel ou pour émettre un son de « tic-tac ».
| Clé | Valeur |
|---|---|
type | 'currentIndexChange' |
currentIndex | L'index de l'élément sur lequel le pointeur pointait. Voir |
onRest(event = {})Levé lorsque la roue s'arrête après avoir tourné.
| Clé | Valeur |
|---|---|
type | 'rest' |
currentIndex | L'index de l'élément sur lequel le pointeur pointait. Voir |
rotation | La rotation de la roue. Voir |
onSpin(event = {})Levé lorsque la roue a tourné.
| Clé | Valeur |
|---|---|
type | 'spin' |
duration | La durée de l'animation de rotation. Fourni uniquement lorsque method = spinto ou method = spintoitem . |
method | La méthode utilisée pour faire tourner la roue ( interact , spin , spinto , spintoitem ). |
rotationResistance | Valeur de Wheel.rotationResistance au moment où l'événement a été déclenché. Fourni uniquement lorsque |
rotationSpeed | Valeur de Wheel.rotationSpeed au moment où l'événement a été déclenché. Fourni uniquement lorsque |
targetItemIndex | L'élément sur lequel le pointeur pointera une fois l'animation de rotation terminée. Fourni uniquement lorsque |
targetRotation | La valeur qu'aura Wheel.rotation une fois l'animation de rotation terminée. Fourni uniquement lorsque |
Item| Nom | Description |
|---|---|
getCenterAngle() | Obtenez l'angle (en degrés) auquel cet élément se termine (exclusif), en ignorant la rotation actuelle de la roue. |
getEndAngle() | Obtenez l'angle (en degrés) auquel cet élément se termine (inclus), en ignorant la rotation actuelle de la roue. |
getIndex() | Obtenez l'index de base 0 de cet élément. |
getRandomAngle() | Renvoie un angle aléatoire (en degrés) entre l'angle de début (inclus) et l'angle de fin (inclus) de cet élément. |
getStartAngle() | Obtenez l'angle (en degrés) auquel cet élément commence (inclus), en ignorant la rotation actuelle de la roue. |
init(props = {}) | Initialisez toutes les propriétés. Si une valeur n'est pas définie ou n'est pas valide, cette propriété reviendra à une valeur par défaut. |
Item Remarque : définir une propriété sur undefined la réinitialisera à sa valeur par défaut.
| Nom | Valeur par défaut | Description |
|---|---|---|
backgroundColor | null | La couleur CSS de l'arrière-plan de l'élément. Lorsque Exemple : |
image | null | HTMLImageElement à dessiner sur l'élément. Toute partie de l'image qui s'étend à l'extérieur de l'élément sera tronquée. L'image sera dessinée par-dessus |
imageOpacity | 1 | L'opacité (en pourcentage) de Item.image .Utile si vous souhaitez estomper l'image pour faire ressortir l'étiquette de l'article. |
imageRadius | 0.5 | Le point le long du rayon de la roue (en pourcentage, en partant du centre) pour dessiner le centre de Item.image . |
imageRotation | 0 | La rotation (angle en degrés) de Item.image . |
imageScale | 1 | L'échelle (taille en pourcentage) de Item.image . |
label | '' | Le texte qui sera dessiné sur l'élément. |
labelColor | null | La couleur CSS de l'étiquette de l'élément. Lorsque Exemple : |
value | null | Une valeur qui a un sens pour votre application. Par exemple, une référence à l'objet représentant l'élément sur la roue, ou un identifiant de base de données. |
weight | 1 | La taille proportionnelle de l'élément par rapport aux autres éléments de la roue. Par exemple, si vous avez 2 éléments où |
Inspiré de la roue aléatoire.
