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的容器大小相關。例如，當容器大小為500px時， Wheel.LineWidth為1將恰好為1px 。
標籤的配置也很簡單，因為字體大小是自動計算的。您可以選擇設定Wheel.itemLabelFontSizeMax （以像素為單位），但否則最大項目標籤的大小將調整為介於Wheel.itemLabelRadius （百分比）和Wheel.itemLabelRadiusMax （百分比）之間。
這是一個方便的圖表：
Wheel的方法| 方法 | 描述 |
|---|---|
constructor(container, props = {}) | 在容器 Element 內建立輪子並使用 props 對其進行初始化。 |
init(props = {}) | 初始化所有屬性。 |
resize() | [舊版] 重新計算並重新繪製輪子。僅在不支援 ResizeObserver 的舊版瀏覽器的某些情況下需要。 |
remove() | 從 DOM 移除輪子並取消註冊事件處理程序。 |
spin(rotationSpeed = 0) | 透過設定rotationSpeed來旋轉輪子。輪子將立即開始旋轉，並隨著時間的推移減慢速度，具體取決於rotationResistance的值。正數將順時針旋轉，負數將逆時針旋轉。 |
spinTo(rotation = 0, duration = 0, easingFunction = null) | 將輪子旋轉到特定的旋轉。 動畫將在提供的持續 可以透過提供可選的 如果未提供緩動函數，則將使用預設的 escapeSinOut。 例如緩動函數請參閱 easing-utils。 |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | 將輪盤旋轉到特定項目。 動畫將在提供的持續 如果 可以透過提供可選的 如果未提供緩動函數，則將使用預設的 escapeSinOut。 例如緩動函數請參閱 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的最大絕對值。車輪在任一方向上的旋轉速度都不會超過該數值。 |
Wheel活動onCurrentIndexChange(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 | 一些對您的應用程式有意義的值。例如，對錶示輪子上的項目的物件的引用，或資料庫 ID。 |
weight | 1 | 此項目相對於輪盤上其他項目的比例大小。 例如，如果您有 2 個項目，其中 |
受到隨機輪的啟發。
