抽奖！抽奖！抽奖！大转盘、九宫格、老虎机开放抽奖组件！

一个基于JS+Canvas实现大转盘&九宫格&老虎机的抽奖免费组件！只需要简单的配置需要的属性就可以制定自己需要的功能效果。

地址如下：https://100px.net/

使用范围：JS/TS、VUE、Reacct、微信小程序、UniApp、Taro中使用。

第一步先安装插件：

# npm 安装： npm install @lucky-canvas/react@latest # yarn 安装： yarn add @lucky-canvas/react@latest

第二步超简单的引入方式

在示例中的基本示例选择你需要的的抽奖模式→大转盘、九宫格、老虎机。

引入你的页面或者单独将抽奖封装成一个组件即可使用。

第三步根据提供的文档中的属性，修改成你单独的抽奖组件。

使用示例，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

封装组件的使用：

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

效果图略~~~~

整体使用感觉：这个抽奖活动的组件十分简用，相当于Echarts来说都是差不多类似的，只要你会读文档，仔细看配置属性很快就可以上手使用它的，本章内容就简单的介绍一个该公共组件不多做介绍，希望能够帮助各位在工作上解决相应问题。