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 = {}) | 컨테이너 요소 내부에 바퀴를 생성하고 소품으로 초기화합니다. |
init(props = {}) | 모든 속성을 초기화합니다. 속성에 값이 제공되지 않으면 기본값이 지정됩니다. |
resize() | [레거시] 바퀴를 다시 계산하고 다시 그립니다. ResizeObserver를 지원하지 않는 이전 브라우저의 특정 시나리오에서만 필요합니다. |
remove() | DOM에서 휠을 제거하고 이벤트 핸들러 등록을 취소합니다. |
spin(rotationSpeed = 0) | rotationSpeed 설정하여 바퀴를 회전시킵니다. 바퀴는 즉시 회전하기 시작하고, rotationResistance 값에 따라 시간이 지남에 따라 속도가 느려집니다.양수는 시계 방향으로 회전하고, 음수는 시계 반대 방향으로 회전합니다. |
spinTo(rotation = 0, duration = 0, easingFunction = null) | 휠을 특정 회전으로 돌립니다. 애니메이션은 제공된 단일 매개변수 n을 허용하는 선택적 여유 기능이 제공되지 않으면 기본 easySinOut이 사용됩니다. 완화 함수의 예는 easing-utils를 참조하세요. |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | 특정 항목으로 휠을 돌립니다. 애니메이션은 제공된 단일 매개변수 n을 허용하는 선택적 여유 기능이 제공되지 않으면 기본 easySinOut이 사용됩니다. 완화 함수의 예는 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 매초마다 감소됩니다. 휠을 무한히 회전하려면 |
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 | 휠의 다른 항목과 관련된 항목의 비례 크기입니다. 예를 들어, |
랜덤 휠에서 영감을 얻었습니다.
