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 = {}) | コンテナ要素内にホイールを作成し、props で初期化します。 |
init(props = {}) | すべてのプロパティを初期化します。プロパティに値が指定されていない場合は、デフォルト値が与えられます。 |
resize() | [レガシー] ホイールを再計算して再描画します。 ResizeObserver をサポートしていない古いブラウザーの特定のシナリオでのみ必要です。 |
remove() | DOM からホイールを削除し、イベント ハンドラーの登録を解除します。 |
spin(rotationSpeed = 0) | rotationSpeedを設定してホイールを回転させます。ホイールはすぐに回転を開始し、 rotationResistanceの値に応じて時間の経過とともに速度が低下します。正の数は時計回りに回転し、負の数は反時計回りに回転します。 |
spinTo(rotation = 0, duration = 0, easingFunction = null) | ホイールを特定の回転まで回転させます。 アニメーションは、指定された アニメーションは、単一のパラメーター n (n は 0 から 1 まで) を受け入れるオプションの イージング関数が提供されていない場合は、デフォルトのeaseSinOutが使用されます。 たとえば、イージング関数については、easing-utils を参照してください。 |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | ホイールを回して特定のアイテムを選択します。 アニメーションは、指定された アニメーションは、単一のパラメーター n (n は 0 から 1 まで) を受け入れるオプションの イージング関数が提供されていない場合は、デフォルトのeaseSinOutが使用されます。 たとえば、イージング関数については、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 | すべての項目ラベルの回転。ラベルを180°反転するには、これをitemLabelAlignと組み合わせて使用します。 |
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 1 秒ごとに減少する量。ホイールを無限に回転させるには |
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 | ホイール上の他のアイテムに対するアイテムの比例サイズ。 たとえば、 |
ランダムホイールからインスピレーションを受けています。
