¡lotería! ¡lotería! ¡lotería! ¡El gran carrusel, la cuadrícula de nueve cuadrados y la máquina tragamonedas están abiertos para los componentes de la lotería!

¡Un componente de lotería gratuito basado en JS+Canvas que implementa el gran plato giratorio, la cuadrícula de nueve cuadrados y la máquina tragamonedas! Sólo necesita configurar los atributos requeridos para formular los efectos funcionales que necesita.

La dirección es la siguiente: https://100px.net/

Ámbito de uso: utilizado en JS/TS, VUE, Reacct, subprograma WeChat, UniApp y Taro.

El primer paso es instalar el complemento:

# instalación de npm: instalación de npm @lucky-canvas/react@latest # instalación de hilo: adición de hilo @lucky-canvas/ react@latest

El segundo paso es un método de introducción súper simple.

En el ejemplo básico del ejemplo, seleccione el modo de lotería que necesita → rueda grande, cuadrícula de nueve cuadrados, máquina tragamonedas.

Preséntelo en su página o encapsule la lotería en un componente separado para usar.

El tercer paso es modificarlo en su componente de lotería independiente según los atributos del documento proporcionado.

Ejemplo de uso, componente de lotería encapsulado individualmente en React

//简单封装
export interface RouletteConfiguration {
  width?: string
  height?: string
  Blocks?: any
  Prizes?: any
  RouletteImage?: any
}

const BigWheel = (props: RouletteConfiguration) => {
    //获取初始化数据
  useEffect(() => {
    setblocks([
      {
        padding: '12px',
        imgs: [
          {
            src: props?.RouletteImage,
            width: '100%',
            height: '100%',
            rotate: true
          }
        ]
      }
    ])
  }, [props?.RouletteImage])
 
  const [blocks, setblocks]: any = useState([
    {
      padding: '10px',
      background: '#869cfa',
      imgs: [{ src: props?.RouletteImage }]
    }
  ])
  //奖项中的文字
  const [prizes, setprizes] = useState([
    { background: 'transparent', fonts: [{ text: '0' }] },
    { background: 'transparent', fonts: [{ text: '1' }] },
    { background: 'transparent', fonts: [{ text: '2' }] },
    { background: 'transparent', fonts: [{ text: '3' }] },
    { background: 'transparent', fonts: [{ text: '4' }] },
    { background: 'transparent', fonts: [{ text: '5' }] }
  ])
  const [buttons] = useState([
    {
      radius: '45%',
      imgs: [
        {
          src: pointer,
          width: '60%',
          top: '-100%'
        }
      ],
      pointer: true,
      fonts: [
        {
          text: '立即\n参与',
          top: '-16px',
          fontColor: '#EC5741',
          fontSize: '15px',
          fontWeight: '600'
        }
      ]
    }
  ])
  const myLucky: any = useRef()
  return (
    <div className="tuxingzhujian">
      <LuckyWheel
        ref={myLucky}
        width={props?.width ? props?.width : '250px'}
        height={props?.width ? props?.width : '250px'}
        blocks={blocks}
        prizes={prizes}
        buttons={buttons}
        onStart={() => {
          console.log('buttonsbuttons', prizes)
          // 点击抽奖按钮会触发star回调
          if (prizes.length > 0) {
            myLucky?.current.play()
            setTimeout(() => {
              const index = (Math.random() * 6) >> 0
              myLucky?.current.stop(index)
            }, 2500)
          } else {
            message.warning('请设置轮盘分区数量！')
          }
        }}
        onEnd={prize => {
          // 抽奖结束会触发end回调
          if (prize.fonts[0].text === '谢谢参与') {
            message.success('谢谢参与')
          } else {
            message.success('恭喜你抽到了' + prize.fonts[0].text + ' 奖品')
          }
        }}
      ></LuckyWheel>
    </div>
  )
}

export default BigWheel

Uso de componentes encapsulados:

<LuckyWheel
        ref={myLucky}
        width="250px"
        height="250px"
        blocks={blocks}
        prizes={prizes}
        buttons={buttons}
        onStart={() => {
          //用户登录时才触发转盘
          if (props?.login) {
            // 点击抽奖按钮会触发star回调
            //红线报错不用管
            myLucky?.current.play();
            setTimeout(() =>
              const index = (Math.random() * 6) >> 0;
              myLucky?.current.stop(index);
            }, 2500);
          } else {
   
          }
        }}
        onEnd={(prize: any) => {
          // 抽奖结束会触发end回调
}
      ></LuckyWheel>

Representaciones abreviadas ~~~~

Experiencia de uso general: los componentes de esta lotería son muy simples de usar. Son casi similares a Echarts. Siempre que pueda leer la documentación y observar detenidamente las propiedades de configuración, puede comenzar a usarlo rápidamente. Este capítulo lo presentará brevemente. 1. Este componente público no se presentará en detalle. Espero que pueda ayudarlo a resolver los problemas correspondientes en el trabajo.