spin wheel
5.0.2
Eine benutzerfreundliche, thematische Komponente zur Zufallsauswahl und Gewinnermittlung.
onSpin und 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 ) ; Für Multiplayer-Spiele oder die Vergabe von Preisen mit tatsächlichem Wert ist es am besten, Wheel.spinToItem() aufzurufen. Das Rad dreht sich für eine bestimmte Dauer und sobald es fertig ist, zeigt der Zeiger auf das angegebene Objekt. Sie sollten den Gewinnerartikel immer im Backend berechnen, zum Beispiel:
const winningItemIndex = await fetchWinningItemIndex ( ) ;
const duration = 4000 ;
const easing = easing . cubicOut ;
wheel . spinToItem ( winningItemIndex , duration , true , 2 , 1 , easing ) Wenn Präzision nicht wichtig ist, können Sie Wheel.spin() verwenden, um das Rad sofort mit einer bestimmten Geschwindigkeit zu drehen, die gemäß Wheel.rotationResistance mit der Zeit reduziert wird. Sie können Wheel.isInteractive = true setzen, damit der Benutzer das Rad selbst durch Ziehen oder Schnippen drehen kann.
Das Rad verfügt nicht über einen eingebauten Zeiger, stattdessen legen Sie Wheel.pointerAngle fest und zeichnen den Zeiger selbst. Dies liegt daran, dass es viele Möglichkeiten gibt, wie der Zeiger aussehen und sich verhalten soll, z. B. indem Sie ihn animieren.
Sie haben folgende Möglichkeiten, den Zeiger zu zeichnen:
Wheel.overlayImage Bilder werden als Instanzen von HTMLImageElement übergeben und sollten vorab geladen werden, andernfalls kommt es zu einer anfänglichen Verzögerung (oder einem Flackern), während der Browser sie herunterlädt. Aus dem gleichen Grund sollten auch Schriftarten vorinstalliert sein. Ein Beispiel für das Vorladen von Bildern und Schriftarten finden Sie im Code hinter dem Theme-Beispiel.
Alles ist einfach zu konfigurieren. Das Rad reagiert und passt die Größe automatisch an den Container an. Wenn sich die Größe des Containers ändert, müssen Sie sich also keine Gedanken über die Aktualisierung umständlicher Dinge wie Breite und Schriftgröße machen. Aus diesem Grund werden einige numerische Eigenschaften als Prozentsätze ausgedrückt, während andere als Pixel ausgedrückt werden.
Prozenteigenschaften sind ein Prozentsatz der Containergröße. Ein Wheel.radius von 0.9 bedeutet beispielsweise, dass das Rad 90% des Containers ausfüllt.
Pixeleigenschaften beziehen sich auf eine Containergröße von 500px . Beispielsweise beträgt ein Wheel.LineWidth von 1 genau 1px , wenn die Containergröße 500px beträgt.
Auch Beschriftungen sind einfach zu konfigurieren, da die Schriftgröße automatisch berechnet wird. Sie können optional Wheel.itemLabelFontSizeMax (in Pixel) festlegen, andernfalls wird die Größe der größten Elementbeschriftung so angepasst, dass sie zwischen Wheel.itemLabelRadius (Prozent) und Wheel.itemLabelRadiusMax (Prozent) passt.
Hier ist ein praktisches Diagramm:
Wheel| Verfahren | Beschreibung |
|---|---|
constructor(container, props = {}) | Erstellen Sie das Rad in einem Containerelement und initialisieren Sie es mit Requisiten. |
init(props = {}) | Alle Eigenschaften initialisieren. Wenn für eine Eigenschaft kein Wert angegeben wird, wird ihr ein Standardwert zugewiesen. |
resize() | [Legacy] Berechnen Sie das Rad neu und zeichnen Sie es neu. Wird nur in bestimmten Szenarien für ältere Browser benötigt, die ResizeObserver nicht unterstützen. |
remove() | Entfernen Sie das Rad aus dem DOM und heben Sie die Registrierung von Ereignishandlern auf. |
spin(rotationSpeed = 0) | Drehen Sie das Rad, indem Sie rotationSpeed einstellen. Das Rad beginnt sich sofort zu drehen und wird mit der Zeit abhängig vom Wert von rotationResistance langsamer.Eine positive Zahl dreht sich im Uhrzeigersinn, eine negative Zahl dreht sich gegen den Uhrzeigersinn. |
spinTo(rotation = 0, duration = 0, easingFunction = null) | Drehen Sie das Rad auf eine bestimmte Drehung. Die Animation wird über die angegebene Die Animation kann angepasst werden, indem eine optionale Wenn keine Beschleunigungsfunktion bereitgestellt wird, wird die Standardfunktion „easingSinOut“ verwendet. Beispiele für Easing-Funktionen finden Sie unter Easing-Utils. |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | Drehen Sie das Rad zu einem bestimmten Gegenstand. Die Animation wird über die angegebene Wenn Die Animation kann angepasst werden, indem eine optionale Wenn keine Beschleunigungsfunktion bereitgestellt wird, wird die Standardfunktion „easeSinOut“ verwendet. Beispiele für Easing-Funktionen finden Sie unter Easing-Utils. |
stop() | Stoppen Sie sofort das Durchdrehen des Rads, unabhängig davon, mit welcher Methode es gedreht wurde. |
getCurrentIndex() | Rufen Sie den Index des Elements ab, auf das der Zeiger zeigt. Ein Element gilt als „aktuell“, wenn |
Wheel Hinweis: Wenn Sie eine Eigenschaft auf undefined setzen, wird sie auf den Standardwert zurückgesetzt.
| Name | Standardwert | Beschreibung |
|---|---|---|
borderColor | '#000' | Die CSS-Farbe für die Linie um den Radumfang. |
borderWidth | 0 | Die Breite (in Pixel) der Linie um den Radumfang. |
debug | false | Es werden Debugging-Informationen angezeigt. Dies ist hilfreich bei der Positionierung von Etiketten. |
image | null | Das HTMLImageElement zum Zeichnen auf dem Rad und zum Drehen mit dem Rad. Es wird zentriert und so skaliert, dass es zu |
isInteractive | true | Wenn der Benutzer das Rad per Klicken-Ziehen/Touch-Flick drehen darf. Benutzerinteraktionen werden nur innerhalb der Grenzen von |
itemBackgroundColors | ['#fff'] | Die CSS-Farben, die als sich wiederholendes Muster für die Hintergrundfarben aller Elemente verwendet werden sollen. Überschrieben durch Beispiel: |
itemLabelAlign | 'right' | Die Ausrichtung aller Artikelbeschriftungen. Mögliche Werte: |
itemLabelBaselineOffset | 0 | Der Versatz der Grundlinie (oder Zeilenhöhe) aller Elementbeschriftungen (in Prozent der Beschriftungshöhe). |
itemLabelColors | ['#000'] | Die CSS-Farben, die als sich wiederholendes Muster für die Farben aller Artikelbeschriftungen verwendet werden sollen. Überschrieben durch Beispiel: |
itemLabelFont | 'sans-serif' | Die Schriftartenfamilie, die für alle Artikelbeschriftungen verwendet werden soll. Beispiel: |
itemLabelFontSizeMax | 100 | Die maximale Schriftgröße (in Pixel) für alle Elementbeschriftungen. |
itemLabelRadius | 0.85 | Der Punkt entlang des Radradius (in Prozent, ausgehend von der Mitte), an dem mit dem Zeichnen aller Elementbeschriftungen begonnen werden soll. |
itemLabelRadiusMax | 0.2 | Der Punkt entlang des Radradius (in Prozent, beginnend von der Mitte), um die maximale Breite aller Elementbeschriftungen zu begrenzen. |
itemLabelRotation | 0 | Die Drehung aller Artikelbeschriftungen. Verwenden Sie dies in Kombination mit itemLabelAlign , um die Beschriftungen um 180° zu drehen. |
itemLabelStrokeColor | '#fff' | Die CSS-Farbe des Strichs, der auf die Außenseite des Beschriftungstexts angewendet wird. |
itemLabelStrokeWidth | 0 | Die Breite des Strichs, der auf die Außenseite des Etikettentexts angewendet wird. |
items | [] | Die auf dem Rad angezeigten Elemente (oder Scheiben, Keile, Segmente). Durch Festlegen dieser Eigenschaft werden alle Elemente auf dem Rad basierend auf den bereitgestellten Objekten neu erstellt. Durch den Zugriff auf diese Eigenschaft können Sie einzelne Elemente ändern. Sie können beispielsweise die Hintergrundfarbe eines Elements ändern. |
lineColor | '#000' | Die CSS-Farbe der Linien zwischen den Elementen. |
lineWidth | 1 | Die Breite (in Pixel) der Linien zwischen den Elementen. |
offset | {x: 0, y: 0} | Der Versatz des Rades von der Mitte seines Behälters (in Prozent des Raddurchmessers). |
onCurrentIndexChange | null | Der Rückruf für das onCurrentIndexChange -Ereignis. |
onRest | null | Der Rückruf für das onRest -Ereignis. |
onSpin | null | Der Rückruf für das onSpin -Ereignis. |
overlayImage | null | Das HTMLImageElement, das über den oberen Rand des Rads gezeichnet werden soll. Es wird zentriert und skaliert, um der kleinsten Abmessung des Containers zu entsprechen. Verwenden Sie diese Option, um Dekorationen rund um das Rad zu zeichnen, beispielsweise einen Ständer oder einen Zeiger. |
pixelRatio | 0 | Das Pixelverhältnis (in Prozent), das zum Zeichnen des Rads verwendet wird. Höhere Werte führen zu einem schärferen Bild auf Kosten der Leistung, die Schärfe hängt jedoch vom aktuellen Anzeigegerät ab. Ein Wert von |
pointerAngle | 0 | Der Winkel des Zeigers, der zur Bestimmung des currentIndex (oder des „gewinnenden“ Elements) verwendet wird. |
radius | 0.95 | Der Radius des Rades (in Prozent der kleinsten Abmessung des Containers). |
rotation | 0 | Die Drehung (Winkel in Grad) des Rades. Von diesem Punkt aus wird das erste Element im Uhrzeigersinn gezeichnet. |
rotationResistance | -35 | Der Betrag, um den rotationSpeed jede Sekunde verringert wird, bis sich das Rad nicht mehr dreht. Auf |
rotationSpeed | 0 | [Schreibgeschützt] Wie schnell (Winkel in Grad) sich das Rad jede Sekunde dreht. Eine positive Zahl bedeutet, dass sich das Rad im Uhrzeigersinn dreht, eine negative Zahl bedeutet, dass es sich gegen den Uhrzeigersinn dreht, und |
rotationSpeedMax | 250 | Der maximale absolute Wert für rotationSpeed .Das Rad dreht sich in keiner Richtung schneller als dieser Wert. |
WheelonCurrentIndexChange(event = {})Wird ausgelöst, wenn auf ein neues Element gezeigt wird. Dies kann verwendet werden, um die Farbe des aktuellen Elements zu ändern oder einen tickenden Ton abzuspielen.
| Schlüssel | Wert |
|---|---|
type | 'currentIndexChange' |
currentIndex | Der Index des Elements, auf das der Zeiger zeigte. Siehe |
onRest(event = {})Wird angehoben, wenn das Rad nach dem Durchdrehen zum Stillstand kommt.
| Schlüssel | Wert |
|---|---|
type | 'rest' |
currentIndex | Der Index des Elements, auf das der Zeiger zeigte. Siehe |
rotation | Die Drehung des Rades. Siehe |
onSpin(event = {})Wird angehoben, wenn das Rad gedreht wurde.
| Schlüssel | Wert |
|---|---|
type | 'spin' |
duration | Die Dauer der Spin-Animation. Wird nur bereitgestellt, wenn method = spinto oder method = spintoitem . |
method | Die Methode, mit der das Rad gedreht wurde ( interact , spin , spinto , spintoitem ). |
rotationResistance | Der Wert von Wheel.rotationResistance zum Zeitpunkt der Auslösung des Ereignisses. Wird nur bereitgestellt, wenn |
rotationSpeed | Der Wert von Wheel.rotationSpeed zum Zeitpunkt der Auslösung des Ereignisses. Wird nur bereitgestellt, wenn |
targetItemIndex | Das Element, auf das der Zeiger zeigt, sobald die Drehanimation beendet ist. Wird nur bereitgestellt, wenn |
targetRotation | Der Wert, den Wheel.rotation haben wird, sobald die Drehanimation beendet ist. Wird nur bereitgestellt, wenn |
Item| Name | Beschreibung |
|---|---|
getCenterAngle() | Ermittelt den Winkel (in Grad), bei dem dieses Element endet (ausschließlich), wobei die aktuelle rotation des Rads ignoriert wird. |
getEndAngle() | Ermittelt den Winkel (in Grad), bei dem dieses Element endet (einschließlich), wobei die aktuelle rotation des Rads ignoriert wird. |
getIndex() | Rufen Sie den 0-basierten Index dieses Elements ab. |
getRandomAngle() | Gibt einen zufälligen Winkel (in Grad) zwischen dem Startwinkel (einschließlich) und dem Endwinkel (einschließlich) dieses Elements zurück. |
getStartAngle() | Ermittelt den Winkel (in Grad), bei dem dieses Element beginnt (einschließlich), wobei die aktuelle rotation des Rads ignoriert wird. |
init(props = {}) | Alle Eigenschaften initialisieren. Wenn ein Wert undefiniert oder ungültig ist, wird diese Eigenschaft auf einen Standardwert zurückgesetzt. |
Item Hinweis: Wenn Sie eine Eigenschaft auf undefined setzen, wird sie auf den Standardwert zurückgesetzt.
| Name | Standardwert | Beschreibung |
|---|---|---|
backgroundColor | null | Die CSS-Farbe des Hintergrunds des Elements. Bei Beispiel: |
image | null | Das HTMLImageElement, das auf dem Element gezeichnet werden soll. Jeder Teil des Bildes, der über das Element hinausragt, wird abgeschnitten. Das Bild wird über |
imageOpacity | 1 | Die Deckkraft (in Prozent) von Item.image .Nützlich, wenn Sie das Bild ausblenden möchten, um das Etikett des Artikels hervorzuheben. |
imageRadius | 0.5 | Der Punkt entlang des Radradius (in Prozent, ausgehend von der Mitte), um die Mitte von Item.image zu zeichnen. |
imageRotation | 0 | Die Drehung (Winkel in Grad) von Item.image . |
imageScale | 1 | Der Maßstab (Größe in Prozent) von Item.image . |
label | '' | Der Text, der auf dem Element gezeichnet wird. |
labelColor | null | Die CSS-Farbe der Beschriftung des Elements. Bei Beispiel: |
value | null | Ein Wert, der für Ihre Anwendung von Bedeutung ist. Zum Beispiel ein Verweis auf das Objekt, das das Element auf dem Rad darstellt, oder eine Datenbank-ID. |
weight | 1 | Die proportionale Größe des Elements im Verhältnis zu anderen Elementen auf dem Rad. Wenn Sie beispielsweise zwei Artikel haben, bei denen |
Inspiriert vom Zufallsrad.
