spin wheel
5.0.2
Um componente temático e fácil de usar para randomizar escolhas e prêmios.
onSpin e 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 ) ; Para jogos multijogador ou premiação com valor real, a melhor forma é chamar Wheel.spinToItem() . A roda girará por um determinado período e, quando terminar, o ponteiro apontará para o item especificado. Você deve sempre calcular o item vencedor no back-end, por exemplo:
const winningItemIndex = await fetchWinningItemIndex ( ) ;
const duration = 4000 ;
const easing = easing . cubicOut ;
wheel . spinToItem ( winningItemIndex , duration , true , 2 , 1 , easing ) Se a precisão não for importante, você pode usar Wheel.spin() para começar a girar a roda imediatamente em uma determinada velocidade, que será reduzida com o tempo de acordo com Wheel.rotationResistance . Você também pode definir Wheel.isInteractive = true para permitir que o próprio usuário gire a roda arrastando ou deslizando.
A roda não possui um ponteiro embutido; em vez disso, você define Wheel.pointerAngle e desenha o ponteiro você mesmo. Isso ocorre porque há muitas maneiras pelas quais você deseja que o ponteiro apareça e se comporte, por exemplo, você pode querer animá-lo.
Suas opções para desenhar o ponteiro são:
Wheel.overlayImage As imagens são passadas como instâncias de HTMLImageElement e devem ser pré-carregadas, caso contrário, haverá um atraso inicial (ou oscilação) enquanto o navegador as baixa. As fontes também devem ser pré-carregadas pelo mesmo motivo. Veja o exemplo do código por trás do tema para ver como pré-carregar imagens e fontes.
Tudo é fácil de configurar. A roda responde e é redimensionada automaticamente para caber no contêiner; portanto, quando o tamanho do contêiner mudar, você não precisará se preocupar em atualizar coisas complicadas, como larguras e tamanhos de fonte. Por esse motivo, algumas propriedades numéricas são expressas como porcentagens, enquanto outras são expressas como pixels.
As propriedades percentuais são uma porcentagem do tamanho do contêiner. Por exemplo, um Wheel.radius de 0.9 significa que a roda preencherá 90% do contêiner.
As propriedades de pixel são relativas a um tamanho de contêiner de 500px . Por exemplo, um Wheel.LineWidth de 1 será exatamente 1px quando o tamanho do contêiner for 500px .
As etiquetas também são simples de configurar porque o tamanho da fonte é calculado automaticamente. Opcionalmente, você pode definir Wheel.itemLabelFontSizeMax (em pixels), mas caso contrário, o maior rótulo do item será dimensionado para caber entre Wheel.itemLabelRadius (porcentagem) e Wheel.itemLabelRadiusMax (porcentagem).
Aqui está um diagrama útil:
Wheel| Método | Descrição |
|---|---|
constructor(container, props = {}) | Crie a roda dentro de um elemento contêiner e inicialize-a com adereços. |
init(props = {}) | Inicialize todas as propriedades. Se um valor não for fornecido para uma propriedade, será fornecido um valor padrão. |
resize() | [Legado] Recalcule e redesenhe a roda. Necessário apenas em determinados cenários para navegadores mais antigos que não suportam ResizeObserver. |
remove() | Remova a roda do DOM e cancele o registro dos manipuladores de eventos. |
spin(rotationSpeed = 0) | Gire a roda definindo rotationSpeed . A roda começará a girar imediatamente e diminuirá a velocidade com o tempo, dependendo do valor de rotationResistance .Um número positivo girará no sentido horário, um número negativo girará no sentido anti-horário. |
spinTo(rotation = 0, duration = 0, easingFunction = null) | Gire a roda para uma rotação específica. A animação ocorrerá durante a A animação pode ser ajustada fornecendo um Se nenhuma função de atenuação for fornecida, o padrão easySinOut será usado. Por exemplo, funções de atenuação, consulte easing-utils. |
spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null) | Gire a roda para um item específico. A animação ocorrerá durante a Se A animação pode ser ajustada fornecendo um Se nenhuma função de atenuação for fornecida, o padrão easySinOut será usado. Por exemplo, funções de atenuação, consulte easing-utils. |
stop() | Pare imediatamente a roda de girar, independentemente do método usado para girá-la. |
getCurrentIndex() | Obtenha o índice do item para o qual o ponteiro está apontando. Um item é considerado "atual" se |
Wheel Nota: definir uma propriedade como undefined irá redefini-la para o valor padrão.
| Nome | Valor padrão | Descrição |
|---|---|---|
borderColor | '#000' | A cor CSS da linha ao redor da circunferência da roda. |
borderWidth | 0 | A largura (em pixels) da linha ao redor da circunferência da roda. |
debug | false | Se as informações de depuração forem mostradas. Isto é útil ao posicionar etiquetas. |
image | null | O HTMLImageElement para desenhar na roda e girar com a roda. Ele será centralizado e dimensionado para caber em |
isInteractive | true | Se o usuário tiver permissão para girar a roda usando clicar-arrastar/tocar-flick. A interação do usuário só será detectada dentro dos limites de |
itemBackgroundColors | ['#fff'] | As cores CSS a serem usadas como padrão de repetição para as cores de fundo de todos os itens. Substituído por Exemplo: |
itemLabelAlign | 'right' | O alinhamento de todos os rótulos de item. Valores possíveis: |
itemLabelBaselineOffset | 0 | O deslocamento da linha de base (ou altura da linha) de todos os rótulos de item (como uma porcentagem da altura do rótulo). |
itemLabelColors | ['#000'] | As cores CSS a serem usadas como padrão de repetição para as cores de todos os rótulos de itens. Substituído por Exemplo: |
itemLabelFont | 'sans-serif' | A família de fontes a ser usada para todos os rótulos de itens. Exemplo: |
itemLabelFontSizeMax | 100 | O tamanho máximo da fonte (em pixels) para todos os rótulos de itens. |
itemLabelRadius | 0.85 | O ponto ao longo do raio da roda (como uma porcentagem, começando no centro) para começar a desenhar todos os rótulos dos itens. |
itemLabelRadiusMax | 0.2 | O ponto ao longo do raio da roda (como uma porcentagem, começando no centro) para limitar a largura máxima de todos os rótulos de itens. |
itemLabelRotation | 0 | A rotação de todos os rótulos de itens. Use isso em combinação com itemLabelAlign para virar os rótulos 180° . |
itemLabelStrokeColor | '#fff' | A cor CSS do traço aplicado na parte externa do texto do rótulo. |
itemLabelStrokeWidth | 0 | A largura do traço aplicado na parte externa do texto do rótulo. |
items | [] | Os itens (ou fatias, fatias, segmentos) mostrados na roda. Definir esta propriedade recriará todos os itens na roda com base nos objetos fornecidos. Acessar esta propriedade permite alterar itens individuais. Por exemplo, você pode alterar a cor de fundo de um item. |
lineColor | '#000' | A cor CSS das linhas entre os itens. |
lineWidth | 1 | A largura (em pixels) das linhas entre os itens. |
offset | {x: 0, y: 0} | O deslocamento da roda em relação ao centro do contêiner (como uma porcentagem do diâmetro da roda). |
onCurrentIndexChange | null | O retorno de chamada para o evento onCurrentIndexChange . |
onRest | null | O retorno de chamada para o evento onRest . |
onSpin | null | O retorno de chamada para o evento onSpin . |
overlayImage | null | O HTMLImageElement a ser desenhado na parte superior da roda. Ele será centralizado e dimensionado para caber na menor dimensão do contêiner. Use-o para desenhar decorações ao redor da roda, como um suporte ou um ponteiro. |
pixelRatio | 0 | A proporção de pixels (como uma porcentagem) usada para desenhar a roda. Valores mais altos produzirão uma imagem mais nítida em detrimento do desempenho, mas a nitidez depende do dispositivo de exibição atual. Um valor |
pointerAngle | 0 | O ângulo do ponteiro que será usado para determinar o currentIndex (ou o item "vencedor"). |
radius | 0.95 | O raio da roda (como uma porcentagem da menor dimensão do contêiner). |
rotation | 0 | A rotação (ângulo em graus) da roda. O primeiro item será desenhado no sentido horário a partir deste ponto. |
rotationResistance | -35 | A quantidade que rotationSpeed será reduzida a cada segundo até que a roda pare de girar. Defina como |
rotationSpeed | 0 | [Somente leitura] Quão rápido (ângulo em graus) a roda gira a cada 1 segundo. Um número positivo significa que a roda está girando no sentido horário, um número negativo significa anti-horário e |
rotationSpeedMax | 250 | O valor absoluto máximo para rotationSpeed .A roda não girará mais rápido que esse valor em nenhuma direção. |
WheelonCurrentIndexChange(event = {})Gerado quando um novo item é apontado. Isto pode ser usado para alterar a cor do item atual ou reproduzir um som de 'tique-taque'.
| Chave | Valor |
|---|---|
type | 'currentIndexChange' |
currentIndex | O índice do item para o qual o Ponteiro estava apontando. Consulte |
onRest(event = {})Levantado quando a roda para depois de girar.
| Chave | Valor |
|---|---|
type | 'rest' |
currentIndex | O índice do item para o qual o Ponteiro estava apontando. Consulte |
rotation | A rotação da roda. Consulte |
onSpin(event = {})Levantado quando a roda foi girada.
| Chave | Valor |
|---|---|
type | 'spin' |
duration | A duração da animação de rotação. Fornecido somente quando method = spinto ou method = spintoitem . |
method | O método usado para girar a roda ( interact , spin , spinto , spintoitem ). |
rotationResistance | O valor de Wheel.rotationResistance no momento em que o evento foi gerado. Fornecido apenas quando |
rotationSpeed | O valor de Wheel.rotationSpeed no momento em que o evento foi gerado. Fornecido apenas quando |
targetItemIndex | O item para o qual o ponteiro apontará quando a animação de giro terminar. Fornecido apenas quando |
targetRotation | O valor que Wheel.rotation terá quando a animação de giro terminar. Fornecido somente quando |
Item| Nome | Descrição |
|---|---|
getCenterAngle() | Obtenha o ângulo (em graus) em que este item termina (exclusivo), ignorando a rotation atual da roda. |
getEndAngle() | Obtenha o ângulo (em graus) em que este item termina (inclusive), ignorando a rotation atual da roda. |
getIndex() | Obtenha o índice baseado em 0 deste item. |
getRandomAngle() | Retorna um ângulo aleatório (em graus) entre o ângulo inicial (inclusive) e o ângulo final (inclusive) deste item. |
getStartAngle() | Obtenha o ângulo (em graus) em que este item começa (inclusive), ignorando a rotation atual da roda. |
init(props = {}) | Inicialize todas as propriedades. Se um valor for indefinido ou inválido, essa propriedade retornará a um valor padrão. |
Item Nota: definir uma propriedade como undefined irá redefini-la para o valor padrão.
| Nome | Valor padrão | Descrição |
|---|---|---|
backgroundColor | null | A cor CSS do plano de fundo do item. Quando Exemplo: |
image | null | O HTMLImageElement para desenhar no item. Qualquer parte da imagem que ultrapasse o item será cortada. A imagem será desenhada sobre |
imageOpacity | 1 | A opacidade (como uma porcentagem) de Item.image .Útil se você deseja esmaecer a imagem para destacar o rótulo do item. |
imageRadius | 0.5 | O ponto ao longo do raio da roda (como uma porcentagem, começando no centro) para desenhar o centro de Item.image . |
imageRotation | 0 | A rotação (ângulo em graus) de Item.image . |
imageScale | 1 | A escala (tamanho em porcentagem) de Item.image . |
label | '' | O texto que será desenhado no item. |
labelColor | null | A cor CSS do rótulo do item. Quando Exemplo: |
value | null | Algum valor que tenha significado para sua aplicação. Por exemplo, uma referência ao objeto que representa o item na roda ou um ID do banco de dados. |
weight | 1 | O tamanho proporcional do item em relação a outros itens na roda. Por exemplo, se você tiver 2 itens onde |
Inspirado na roda aleatória.
