lottery! lottery! lottery! The big carousel, the nine-square grid, and the slot machine are open for lottery components!

A free lottery component based on JS+Canvas that implements the big turntable, nine-square grid, and slot machine! You only need to simply configure the required attributes to formulate the functional effects you need.

The address is as follows: https://100px.net/

Scope of use: used in JS/TS, VUE, Reacct, WeChat applet, UniApp, and Taro.

The first step is to install the plug-in:

# npm installation: npm install @lucky-canvas/react@latest # yarn installation: yarn add @lucky-canvas/ react@latest

The second step is a super simple introduction method

In the basic example in the example, select the lottery mode you need → big wheel, nine-square grid, slot machine.

Introduce it into your page or encapsulate the lottery into a separate component to use.

The third step is to modify it into your separate lottery component based on the attributes in the provided document.

Usage example, individually encapsulated lottery component in 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

Use of encapsulated components:

<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>

Renderings abbreviated~~~~

Overall usage experience: The components of this lottery are very simple to use, and are almost similar to Echarts. As long as you can read the documentation and carefully look at the configuration properties, you can quickly start using it. This chapter will briefly introduce one. This public component will not be introduced in detail. I hope it can help you solve corresponding problems at work.