spin wheel
5.0.2
Komponen bertema yang mudah digunakan untuk mengacak pilihan dan hadiah.
onSpin dan 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 ) ; Untuk permainan multipemain atau pemberian hadiah dengan nilai sebenarnya, cara terbaik adalah dengan memanggil Wheel.spinToItem() . Roda akan berputar dalam durasi tertentu, dan setelah selesai penunjuk akan menunjuk ke item yang ditentukan. Anda harus selalu menghitung item pemenang di back-end, misalnya:
const winningItemIndex = await fetchWinningItemIndex ( ) ;
const duration = 4000 ;
const easing = easing . cubicOut ;
wheel . spinToItem ( winningItemIndex , duration , true , 2 , 1 , easing ) Jika presisi tidak penting, Anda dapat menggunakan Wheel.spin() untuk segera mulai memutar roda pada kecepatan tertentu, yang akan berkurang seiring waktu sesuai Wheel.rotationResistance . Anda juga dapat mengatur Wheel.isInteractive = true untuk memungkinkan pengguna memutar roda sendiri dengan menyeret atau menjentikkan.
Roda tidak memiliki penunjuk bawaan, melainkan Anda menyetel Wheel.pointerAngle dan menggambar sendiri penunjuknya. Hal ini karena ada banyak cara yang Anda inginkan agar penunjuk muncul dan berperilaku, misalnya Anda mungkin ingin menganimasikannya.
Pilihan Anda untuk menggambar penunjuk adalah:
Wheel.overlayImage Gambar diteruskan sebagai instance HTMLImageElement dan harus dimuat sebelumnya, jika tidak, akan ada penundaan awal (atau kedipan) saat browser mendownloadnya. Font juga harus dimuat sebelumnya karena alasan yang sama. Lihat kode di belakang contoh tema untuk contoh cara memuat gambar dan font terlebih dahulu.
Semuanya mudah dikonfigurasi. Roda ini responsif dan mengubah ukuran secara otomatis agar sesuai dengan wadahnya, jadi ketika ukuran wadah berubah Anda tidak perlu khawatir memperbarui hal-hal rumit seperti lebar dan ukuran font. Oleh karena itu, beberapa properti numerik dinyatakan dalam persentase, sementara properti lainnya dinyatakan dalam piksel.
Properti persentase adalah persentase dari ukuran wadah. Misalnya, radius Wheel.radius 0.9 berarti roda akan memenuhi 90% wadah.
Properti piksel relatif terhadap ukuran wadah 500px . Misalnya, Wheel.LineWidth sebesar 1 akan berukuran tepat 1px jika ukuran containernya adalah 500px .
Label juga mudah dikonfigurasi karena ukuran font dihitung secara otomatis. Anda juga dapat mengatur Wheel.itemLabelFontSizeMax (dalam piksel), namun sebaliknya, label item terbesar akan berukuran agar sesuai antara Wheel.itemLabelRadius (persen) dan Wheel.itemLabelRadiusMax (persen).
Berikut diagram praktisnya:
Wheel| Metode | Keterangan |
|---|---|
constructor(container, props = {}) | Buat roda di dalam elemen wadah dan inisialisasi dengan alat peraga. |
init(props = {}) | Inisialisasi semua properti. Jika nilai tidak diberikan untuk properti, maka properti tersebut akan diberi nilai default. |
resize() | [Warisan] Hitung ulang dan gambar ulang roda. Hanya diperlukan dalam skenario tertentu untuk browser lama yang tidak mendukung ResizeObserver. |
remove() | Hapus roda dari DOM dan batalkan registrasi event handler. |
spin(rotationSpeed = 0) | Putar roda dengan mengatur rotationSpeed . Roda akan segera mulai berputar, dan melambat seiring waktu tergantung pada nilai rotationResistance .Bilangan positif akan berputar searah jarum jam, bilangan negatif akan berputar berlawanan arah jarum jam. |
spinTo(rotation = 0, duration = 0, easingFunction = null) | Putar roda ke putaran tertentu. Animasi akan terjadi selama Animasi dapat disesuaikan dengan menyediakan Jika tidak ada fungsi pelonggaran yang disediakan, easeSinOut default akan digunakan. Misalnya fungsi easing, lihat easing-utils. |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | Putar roda ke item tertentu. Animasi akan terjadi selama Jika Animasi dapat disesuaikan dengan menyediakan Jika tidak ada fungsi pelonggaran yang disediakan, easeSinOut default akan digunakan. Misalnya fungsi easing, lihat easing-utils. |
stop() | Segera hentikan roda agar tidak berputar, apa pun metode yang digunakan untuk memutarnya. |
getCurrentIndex() | Dapatkan indeks item yang ditunjuk oleh Pointer. Suatu item dianggap "saat ini" jika |
Wheel Catatan: menyetel properti ke undefined akan menyetel ulang properti ke nilai default.
| Nama | Nilai Bawaan | Keterangan |
|---|---|---|
borderColor | '#000' | Warna CSS untuk garis di sekeliling lingkar roda. |
borderWidth | 0 | Lebar (dalam piksel) garis di sekeliling keliling roda. |
debug | false | Jika info debug akan ditampilkan. Ini berguna saat memposisikan label. |
image | null | HTMLImageElement untuk menggambar pada roda dan memutar dengan roda. Ini akan dipusatkan dan diskalakan agar sesuai |
isInteractive | true | Jika pengguna akan diperbolehkan memutar roda menggunakan klik-drag/sentuh-jentik. Interaksi pengguna hanya akan terdeteksi dalam batas |
itemBackgroundColors | ['#fff'] | Warna CSS yang digunakan sebagai pola berulang untuk warna latar belakang semua item. Diganti oleh Contoh: |
itemLabelAlign | 'right' | Penyelarasan semua label item. Nilai yang mungkin: |
itemLabelBaselineOffset | 0 | Offset garis dasar (atau tinggi garis) semua label item (sebagai persentase tinggi label). |
itemLabelColors | ['#000'] | Warna CSS yang digunakan sebagai pola berulang untuk warna semua label item. Diganti oleh Contoh: |
itemLabelFont | 'sans-serif' | Keluarga font yang digunakan untuk semua label item. Contoh: |
itemLabelFontSizeMax | 100 | Ukuran font maksimum (dalam piksel) untuk semua label item. |
itemLabelRadius | 0.85 | Titik sepanjang jari-jari roda (dalam persen, dimulai dari pusat) untuk mulai menggambar semua label benda. |
itemLabelRadiusMax | 0.2 | Titik sepanjang jari-jari roda (dalam persen, dimulai dari pusat) untuk membatasi lebar maksimum semua label item. |
itemLabelRotation | 0 | Rotasi semua label item. Gunakan ini bersama itemLabelAlign untuk membalik label 180° . |
itemLabelStrokeColor | '#fff' | Warna CSS dari goresan yang diterapkan pada bagian luar teks label. |
itemLabelStrokeWidth | 0 | Lebar goresan yang diterapkan pada bagian luar teks label. |
items | [] | Item (atau irisan, irisan, segmen) yang ditampilkan pada roda. Menyetel properti ini akan membuat ulang semua item pada roda berdasarkan objek yang disediakan. Mengakses properti ini memungkinkan Anda mengubah item satu per satu. Misalnya Anda dapat mengubah warna latar belakang suatu item. |
lineColor | '#000' | Warna CSS garis antar item. |
lineWidth | 1 | Lebar (dalam piksel) garis antar item. |
offset | {x: 0, y: 0} | Pergeseran roda dari bagian tengah wadahnya (dalam persen diameter roda). |
onCurrentIndexChange | null | Callback untuk acara onCurrentIndexChange . |
onRest | null | Panggilan balik untuk acara onRest . |
onSpin | null | Panggilan balik untuk acara onSpin . |
overlayImage | null | HTMLImageElement untuk menggambar di atas roda. Ini akan dipusatkan dan diskalakan agar sesuai dengan dimensi terkecil wadah. Gunakan ini untuk menggambar dekorasi di sekitar roda, seperti dudukan atau penunjuk. |
pixelRatio | 0 | Rasio piksel (dalam persen) yang digunakan untuk menggambar roda. Nilai yang lebih tinggi akan menghasilkan gambar yang lebih tajam dengan mengorbankan performa, namun ketajamannya bergantung pada perangkat tampilan saat ini. Nilai |
pointerAngle | 0 | Sudut Pointer yang akan digunakan untuk menentukan Indeks currentIndex (atau item "yang menang"). |
radius | 0.95 | Jari-jari roda (sebagai persentase dimensi terkecil wadah). |
rotation | 0 | Rotasi (sudut dalam derajat) roda. Item pertama akan digambar searah jarum jam dari titik ini. |
rotationResistance | -35 | Jumlah rotationSpeed akan berkurang setiap detik hingga roda berhenti berputar. Setel ke |
rotationSpeed | 0 | [Readonly] Seberapa cepat (sudut dalam derajat) roda berputar setiap 1 detik. Angka positif berarti roda berputar searah jarum jam, angka negatif berarti berlawanan arah jarum jam, dan |
rotationSpeedMax | 250 | Nilai absolut maksimum untuk rotationSpeed .Roda tidak akan berputar lebih cepat dari nilai ini di kedua arah. |
WheelonCurrentIndexChange(event = {})Dibesarkan ketika item baru diarahkan. Ini dapat digunakan untuk mengubah warna item saat ini, atau memutar suara 'berdetak'.
| Kunci | Nilai |
|---|---|
type | 'currentIndexChange' |
currentIndex | Indeks item yang ditunjuk oleh Pointer. Lihat |
onRest(event = {})Diangkat saat roda berhenti setelah berputar.
| Kunci | Nilai |
|---|---|
type | 'rest' |
currentIndex | Indeks item yang ditunjuk oleh Pointer. Lihat |
rotation | Rotasi roda. Lihat |
onSpin(event = {})Diangkat ketika roda telah diputar.
| Kunci | Nilai |
|---|---|
type | 'spin' |
duration | Durasi animasi putaran. Hanya disediakan ketika method = spinto atau method = spintoitem . |
method | Metode yang digunakan untuk memutar roda ( interact , spin , spinto , spintoitem ). |
rotationResistance | Nilai Wheel.rotationResistance pada saat event dimunculkan. Hanya disediakan ketika |
rotationSpeed | Nilai Wheel.rotationSpeed pada saat event dimunculkan. Hanya disediakan ketika |
targetItemIndex | Item yang akan ditunjuk oleh Pointer setelah animasi putaran selesai. Hanya disediakan ketika |
targetRotation | Nilai yang dimiliki Wheel.rotation setelah animasi putaran selesai. Hanya disediakan ketika |
Item| Nama | Keterangan |
|---|---|
getCenterAngle() | Dapatkan sudut (dalam derajat) di mana item ini berakhir (eksklusif), dengan mengabaikan rotation roda saat ini. |
getEndAngle() | Dapatkan sudut (dalam derajat) di mana item ini berakhir (inklusif), dengan mengabaikan rotation roda saat ini. |
getIndex() | Dapatkan indeks berbasis 0 untuk item ini. |
getRandomAngle() | Mengembalikan sudut acak (dalam derajat) antara sudut awal item ini (inklusif) dan sudut akhir (inklusif). |
getStartAngle() | Dapatkan sudut (dalam derajat) di mana item ini dimulai (inklusif), dengan mengabaikan rotation roda saat ini. |
init(props = {}) | Inisialisasi semua properti. Jika suatu nilai tidak ditentukan atau tidak valid maka properti tersebut akan kembali ke nilai default. |
Item Catatan: menyetel properti ke undefined akan menyetel ulang properti ke nilai default.
| Nama | Nilai Bawaan | Keterangan |
|---|---|---|
backgroundColor | null | Warna CSS latar belakang item. Jika Contoh: |
image | null | HTMLImageElement untuk menggambar item. Setiap bagian gambar yang melampaui item akan terpotong. Gambar akan digambar di atas |
imageOpacity | 1 | Opacity (sebagai persen) dari Item.image .Berguna jika Anda ingin memudarkan gambar agar label item menonjol. |
imageRadius | 0.5 | Titik sepanjang jari-jari roda (dalam persen, dimulai dari pusat) untuk menggambar pusat Item.image . |
imageRotation | 0 | Rotasi (sudut dalam derajat) Item.image . |
imageScale | 1 | Skala (ukuran sebagai persen) dari Item.image . |
label | '' | Teks yang akan digambar pada item tersebut. |
labelColor | null | Warna CSS label item. Jika Contoh: |
value | null | Beberapa nilai yang memiliki arti bagi aplikasi Anda. Misalnya, referensi ke objek yang mewakili item pada roda, atau id database. |
weight | 1 | Ukuran proporsional suatu benda dibandingkan dengan benda lain pada roda. Misalnya, jika Anda memiliki 2 item dengan |
Terinspirasi oleh roda acak.
