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 ตัวอย่างเช่น Wheel.LineWidth ของ 1 จะเป็น 1px พอดีเมื่อขนาดคอนเทนเนอร์คือ 500px
ป้ายกำกับยังกำหนดค่าได้ง่ายเนื่องจากมีการคำนวณขนาดแบบอักษรโดยอัตโนมัติ คุณสามารถเลือกตั้งค่า Wheel.itemLabelFontSizeMax (เป็นพิกเซล) ได้ แต่มิฉะนั้น ป้ายรายการที่ใหญ่ที่สุดจะถูกกำหนดขนาดให้พอดีระหว่าง Wheel.itemLabelRadius (เปอร์เซ็นต์) และ Wheel.itemLabelRadiusMax (เปอร์เซ็นต์)
นี่คือแผนภาพที่มีประโยชน์:
Wheel| วิธี | คำอธิบาย |
|---|---|
constructor(container, props = {}) | สร้างวงล้อภายใน Element ของคอนเทนเนอร์และเริ่มต้นด้วยอุปกรณ์ประกอบฉาก |
init(props = {}) | เริ่มต้นคุณสมบัติทั้งหมด หากไม่ได้ระบุค่าสำหรับคุณสมบัติ คุณสมบัตินั้นจะได้รับค่าเริ่มต้น |
resize() | [Legacy] คำนวณใหม่และวาดวงล้อใหม่ จำเป็นเฉพาะในบางสถานการณ์สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ ResizeObserver |
remove() | ถอดวงล้อออกจาก DOM และยกเลิกการลงทะเบียนตัวจัดการเหตุการณ์ |
spin(rotationSpeed = 0) | หมุนวงล้อโดยการตั้งค่า rotationSpeed วงล้อจะเริ่มหมุนทันทีและช้าลงเมื่อเวลาผ่านไปขึ้นอยู่กับค่าของ rotationResistanceเลขบวกจะหมุนตามเข็มนาฬิกา เลขลบจะหมุนทวนเข็มนาฬิกา |
spinTo(rotation = 0, duration = 0, easingFunction = null) | หมุนวงล้อเพื่อหมุนเฉพาะ ภาพเคลื่อนไหวจะเกิดขึ้นใน ภาพเคลื่อนไหวสามารถปรับได้โดยการระบุฟังก์ชัน หากไม่มีฟังก์ชันการค่อยๆ เปลี่ยน ระบบจะใช้ EaseSinOut เริ่มต้น ตัวอย่างเช่น ฟังก์ชันการค่อยๆ เปลี่ยน โปรดดูที่ easing-utils |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | หมุนวงล้อไปยังรายการใดรายการหนึ่ง ภาพเคลื่อนไหวจะเกิดขึ้นใน หาก ภาพเคลื่อนไหวสามารถปรับได้โดยการระบุฟังก์ชัน หากไม่มีฟังก์ชันการค่อยๆ เปลี่ยน ระบบจะใช้ 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 | การหมุนป้ายกำกับรายการทั้งหมดใช้ร่วมกับ 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วงล้อจะไม่หมุนเร็วกว่าค่านี้ในทิศทางใดทิศทางหนึ่ง |
WheelonCurrentIndexChange(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 | ค่าบางอย่างที่มีความหมายต่อแอปพลิเคชันของคุณ ตัวอย่างเช่น การอ้างอิงถึงวัตถุที่แสดงรายการบนวงล้อ หรือรหัสฐานข้อมูล |
weight | 1 | ขนาดสัดส่วนของสิ่งของที่สัมพันธ์กับสิ่งของอื่นๆ บนวงล้อ ตัวอย่างเช่น หากคุณมี 2 รายการที่ |
แรงบันดาลใจจากวงล้อสุ่ม
