Web前端 lucky-canvas【大转盘 九宫格 老虎机】抽奖插件（适用JS/TS、Vue、React、微信小程序、Uniapp和Taro）

news2024/11/17 17:29:37

Web前端 lucky-canvas 抽奖插件（JS/TS、Vue、React、微信小程序、Uniapp和Taro）

基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖，致力于为 WEB 前端提供一个功能强大且专业可靠的营销组件，只需要通过简单配置即可实现自由化定制，帮助你快速的完成产品需求

  1. 自由配置
    奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置；支持同步 / 异步抽奖；中奖概率前 / 后端可控
  2. 多端适配
    支持 JS / TS / JQ / Vue / React / 微信小程序 / UniApp / Taro 等；并且多端使用 / 表现形式完全一致
  3. 响应式
    自动根据设备 dpr 调整清晰度；并支持使用 百分比 / rem / rpx 属性来适配移动端布局

在这里插入图片描述
更多自定义样式：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

1-1. 在JS/TS中使用：

方式1：通过 script 标签引入，CDN 链接任选一个即可

  • unpkg：https://unpkg.com/lucky-canvas@1.7.25

  • jsdelivr：https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="my-luckyWheel"></div>
    <div id="my-luckyGrid"></div>
    <div onclick="playGame()" id="my-slotMachine"></div>
</body>
<script src="https://unpkg.com/lucky-canvas@1.7.25"></script>
<script>
    # 大转盘
    const luckyWheel = new LuckyCanvas.LuckyWheel('#my-luckyWheel', {
      width: '250px',
      height: '250px',
      blocks: [{ padding: '10px', background: '#617df2' }],
      prizes: [
        { background: '#e9e8fe', fonts: [{ text: '0' }] },
        { background: '#b8c5f2', fonts: [{ text: '1' }] },
        { background: '#e9e8fe', fonts: [{ text: '2' }] },
        { background: '#b8c5f2', fonts: [{ text: '3' }] },
        { background: '#e9e8fe', fonts: [{ text: '4' }] },
        { background: '#b8c5f2', fonts: [{ text: '5' }] },
      ],
      buttons: [{
        radius: '35%',
        background: '#8a9bf3',
        pointer: true,
        fonts: [{ text: '开始', top: '-10px' }]
      }],
      start: function () {
        // 开始游戏
        luckyWheel.play()
        // 使用定时器模拟接口
        setTimeout(() => {
          // 结束游戏
          luckyWheel.stop(0)
        }, 3000)
      }
    })


    # 九宫格
    const luckyGrid = new LuckyCanvas.LuckyGrid('#my-luckyGrid', {
    width: '200px',
    height: '200px',
    blocks: [
      { padding: '10px', background: '#869cfa' },
      { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
      { x: 0, y: 0 },
      { x: 1, y: 0 },
      { x: 2, y: 0 },
      { x: 2, y: 1 },
      { x: 2, y: 2 },
      { x: 1, y: 2 },
      { x: 0, y: 2 },
      { x: 0, y: 1 },
    ],
    buttons: [
      {
        x: 1, y: 1,
        background: '#9c9dd8',
        fonts: [{ text: '开始', top: '25%' }],
      },
    ],
    defaultStyle: {
      background: '#b8c5f2'
    },
    start: function () {
      // 开始游戏
      luckyGrid.play()
      // 使用定时器模拟接口
      setTimeout(() => {
        // 结束游戏, 并抽第0号奖品
        luckyGrid.stop(0)
      }, 3000)
    }
  })


  # 老虎机
  const slotMachine = new LuckyCanvas.SlotMachine('#my-slotMachine', {
    width: '240px',
    height: '180px',
    blocks: [
      { padding: '10px', background: '#869cfa' },
      { padding: '10px', background: '#e9e8fe' },
    ],
    slots: [
      { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
      { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
      { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
    ],
    prizes: [
      { fonts: [{ text: '0', top: '15%' }] },
      { fonts: [{ text: '1', top: '15%' }] },
      { fonts: [{ text: '2', top: '15%' }] },
      { fonts: [{ text: '3', top: '15%' }] },
      { fonts: [{ text: '4', top: '15%' }] },
      { fonts: [{ text: '5', top: '15%' }] },
      { fonts: [{ text: '6', top: '15%' }] },
      { fonts: [{ text: '7', top: '15%' }] },
      { fonts: [{ text: '8', top: '15%' }] },
      { fonts: [{ text: '9', top: '15%' }] },
    ],
    defaultStyle: {
      borderRadius: Infinity,
      background: '#bac5ee',
      fontSize: '32px',
      fontColor: '#333'
    },
    defaultConfig: {
      rowSpacing: '20px',
      colSpacing: '10px'
    },
    end (prize) {
      // console.log(prize)
    }
  })
  // 开始游戏
  const playGame = () => {
    slotMachine.play()
    setTimeout(() => {
      // 假设 4 种结果
      const res = [
        [9, 9, 6],
        [0, 0, 7],
        [6, 6, 6],
        [8, 8, 8]
      ]
      // 随机取一组数据
      const index = res[Math.random() * 4 >> 0]
      // 调用 stop 方法停止游戏
      slotMachine.stop(index)
    }, 500);
  }
  </script>
  
</html>

方式 2：通过 import 引入

# npm 安装
npm install lucky-canvas@latest

# 或者 yarn 安装
yarn add lucky-canvas@latest

<div id="my-luckyWheel"></div>
<div id="my-luckyGrid"></div>
<div onclick="playGame()" id="my-slotMachine"></div>

<script>
import { LuckyWheel,LuckyGrid,SlotMachine } from 'lucky-canvas'

# 大转盘
 const myLucky = new LuckyWheel('#my-luckyWheel', {
   width: '200px',
   height: '200px',
   blocks: [{ padding: '13px', background: '#617df2' }],
   prizes: [
     { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
     { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
     { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
     { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
     { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
     { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
   ],
 })

# 九宫格
 const luckyGrid = new LuckyGrid('#my-luckyGrid', {
    width: '200px',
    height: '200px',
    blocks: [
      { padding: '10px', background: '#869cfa' },
      { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
      { x: 0, y: 0 },
      { x: 1, y: 0 },
      { x: 2, y: 0 },
      { x: 2, y: 1 },
      { x: 2, y: 2 },
      { x: 1, y: 2 },
      { x: 0, y: 2 },
      { x: 0, y: 1 },
    ],
    buttons: [
      {
        x: 1, y: 1,
        background: '#9c9dd8',
        fonts: [{ text: '开始', top: '25%' }],
      },
    ],
    defaultStyle: {
      background: '#b8c5f2'
    },
    start: function () {
      // 开始游戏
      luckyGrid.play()
      // 使用定时器模拟接口
      setTimeout(() => {
        // 结束游戏, 并抽第0号奖品
        luckyGrid.stop(0)
      }, 3000)
    }
  })

# 老虎机
  const slotMachine = new SlotMachine('#my-slotMachine', {
    width: '240px',
    height: '180px',
    blocks: [
      { padding: '10px', background: '#869cfa' },
      { padding: '10px', background: '#e9e8fe' },
    ],
    slots: [
      { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
      { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
      { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
    ],
    prizes: [
      { fonts: [{ text: '0', top: '15%' }] },
      { fonts: [{ text: '1', top: '15%' }] },
      { fonts: [{ text: '2', top: '15%' }] },
      { fonts: [{ text: '3', top: '15%' }] },
      { fonts: [{ text: '4', top: '15%' }] },
      { fonts: [{ text: '5', top: '15%' }] },
      { fonts: [{ text: '6', top: '15%' }] },
      { fonts: [{ text: '7', top: '15%' }] },
      { fonts: [{ text: '8', top: '15%' }] },
      { fonts: [{ text: '9', top: '15%' }] },
    ],
    defaultStyle: {
      borderRadius: Infinity,
      background: '#bac5ee',
      fontSize: '32px',
      fontColor: '#333'
    },
    defaultConfig: {
      rowSpacing: '20px',
      colSpacing: '10px'
    },
    end (prize) {
      // console.log(prize)
    }
  })
  // 开始游戏
  const playGame = () => {
    slotMachine.play()
    setTimeout(() => {
      // 假设 4 种结果
      const res = [
        [9, 9, 6],
        [0, 0, 7],
        [6, 6, 6],
        [8, 8, 8]
      ]
      // 随机取一组数据
      const index = res[Math.random() * 4 >> 0]
      // 调用 stop 方法停止游戏
      slotMachine.stop(index)
    }, 500);
  }
</script>
1-2. 在Vue中使用：

方式 1：通过 import 引入

1.首先安装插件

# npm 安装
npm install @lucky-canvas/vue@latest

# 或者 yarn 安装
yarn add @lucky-canvas/vue@latest

2.在main.js 引入插件

# Vue2
import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

# Vue3
import VueLuckyCanvas from '@lucky-canvas/vue'
createApp(App).use(VueLuckyCanvas).mount('#app')

3.在组件上使用

Vue2 ：

<template>
  <LuckyWheel
    ref="myLuckyWheel"
    width="250px"
    height="250px"
    :prizes="myLuckyWheel.prizes"
    :blocks="myLuckyWheel.blocks"
    :buttons="myLuckyWheel.buttons"
    @start="startLuckyWheel"
    @end="endLuckyWheel"
  />
  <LuckyGrid
    ref="myLuckyGrid"
    width="200px"
    height="200px"
    :prizes="myLuckyGrid.prizes"
    :blocks="myLuckyGrid.blocks"
    :buttons="myLuckyGrid.buttons"
    :defaultStyle="myLuckyGrid.defaultStyle"
    @start="startLuckyGrid"
    @end="endLuckyGrid"
  />

  <SlotMachine
    ref="mySlotMachine"
    width="240px"
    height="180px"
    :blocks="mySlotMachine.blocks"
    :slots="mySlotMachine.slots"
    :prizes="mySlotMachine.prizes"
    :defaultStyle="mySlotMachine.defaultStyle"
    :defaultConfig="mySlotMachine.defaultConfig"
    @click="startSlotMachine"
    @end="endSlotMachine"
  />
</template>

<script>
export default {
  data() {
    return {
      // 大转盘
      myLuckyWheel: {
        blocks: [{ padding: "13px", background: "#617df2" }],
        prizes: [
          { fonts: [{ text: "0", top: "10%" }], background: "#e9e8fe" },
          { fonts: [{ text: "1", top: "10%" }], background: "#b8c5f2" },
          { fonts: [{ text: "2", top: "10%" }], background: "#e9e8fe" },
          { fonts: [{ text: "3", top: "10%" }], background: "#b8c5f2" },
          { fonts: [{ text: "4", top: "10%" }], background: "#e9e8fe" },
          { fonts: [{ text: "5", top: "10%" }], background: "#b8c5f2" },
        ],
        buttons: [
          {
            radius: "35%",
            background: "#8a9bf3",
            pointer: true,
            fonts: [{ text: "开始", top: "-10px" }],
          },
        ],
      },

	  // 九宫格
      myLuckyGrid: {
        blocks: [
          { padding: "10px", background: "#869cfa" },
          { padding: "10px", background: "#e9e8fe" },
        ],
        prizes: [
          { x: 0, y: 0 },
          { x: 1, y: 0 },
          { x: 2, y: 0 },
          { x: 2, y: 1 },
          { x: 2, y: 2 },
          { x: 1, y: 2 },
          { x: 0, y: 2 },
          { x: 0, y: 1 },
        ],
        buttons: [
          {
            x: 1,
            y: 1,
            background: "#9c9dd8",
            fonts: [{ text: "开始", top: "25%" }],
          },
        ],
        defaultStyle: {
          background: "#b8c5f2",
        },
      },

	  // 老虎机
      mySlotMachine: {
        blocks: [
          { padding: "10px", background: "#869cfa" },
          { padding: "10px", background: "#e9e8fe" },
        ],
        slots: [
          { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
          { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
          { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
        ],
        prizes: [
          { fonts: [{ text: "0", top: "15%" }] },
          { fonts: [{ text: "1", top: "15%" }] },
          { fonts: [{ text: "2", top: "15%" }] },
          { fonts: [{ text: "3", top: "15%" }] },
          { fonts: [{ text: "4", top: "15%" }] },
          { fonts: [{ text: "5", top: "15%" }] },
          { fonts: [{ text: "6", top: "15%" }] },
          { fonts: [{ text: "7", top: "15%" }] },
          { fonts: [{ text: "8", top: "15%" }] },
          { fonts: [{ text: "9", top: "15%" }] },
        ],
        defaultStyle: {
          borderRadius: Infinity,
          background: "#bac5ee",
          fontSize: "32px",
          fontColor: "#333",
        },
        defaultConfig: {
          rowSpacing: "20px",
          colSpacing: "10px",
        },
      },
    };
  },
  methods: {
    // 大转盘
    startLuckyWheel() {
      this.$refs.myLuckyWheel.play();
      setTimeout(() => {
        const index = 0;
        this.$refs.myLuckyWheel.stop(index);
      }, 3000);
    },
    endLuckyWheel(prize) {
      console.log(prize);
    },

    // 九宫格
    startLuckyGrid() {
      this.$refs.myLuckyGrid.play();
      setTimeout(() => {
        this.$refs.myLuckyGrid.stop(0);
      }, 3000);
    },
    endLuckyGrid(prize) {
      console.log(prize);
    },

    // 老虎机
    startSlotMachine() {
      this.$refs.mySlotMachine.play();
      setTimeout(() => {
        // 假设 4 种结果
        const res = [
          [9, 9, 6],
          [0, 0, 7],
          [6, 6, 6],
          [8, 8, 8],
        ];
        // 随机取一组数据
        const index = res[(Math.random() * 4) >> 0];
        // 调用 stop 方法停止游戏
        this.$refs.mySlotMachine.stop(index);
      }, 500);
    },
    endSlotMachine(prize) {
      console.log(prize);
    },
  },
};
</script>

Vue3 版本：

<template>
  <LuckyWheel
    ref="myLuckyWheel"
    width="250px"
    height="250px"
    :prizes="myLuckyWheel.prizes"
    :blocks="myLuckyWheel.blocks"
    :buttons="myLuckyWheel.buttons"
    @start="startLuckyWheel"
    @end="endLuckyWheel"
  />
  <LuckyGrid
    ref="myLuckyGrid"
    width="200px"
    height="200px"
    :prizes="myLuckyGrid.prizes"
    :blocks="myLuckyGrid.blocks"
    :buttons="myLuckyGrid.buttons"
    :defaultStyle="myLuckyGrid.defaultStyle"
    @start="startLuckyGrid"
    @end="endLuckyGrid"
  />

  <SlotMachine
    ref="mySlotMachine"
    width="240px"
    height="180px"
    :blocks="mySlotMachine.blocks"
    :slots="mySlotMachine.slots"
    :prizes="mySlotMachine.prizes"
    :defaultStyle="mySlotMachine.defaultStyle"
    :defaultConfig="mySlotMachine.defaultConfig"
    @click="startSlotMachine"
    @end="endSlotMachine"
  />
</template>

<script setup>
import { ref } from "vue";

// 大转盘
const myLuckyWheel = ref({
  blocks: [{ padding: "13px", background: "#617df2" }],
  prizes: [
    { fonts: [{ text: "0", top: "10%" }], background: "#e9e8fe" },
    { fonts: [{ text: "1", top: "10%" }], background: "#b8c5f2" },
    { fonts: [{ text: "2", top: "10%" }], background: "#e9e8fe" },
    { fonts: [{ text: "3", top: "10%" }], background: "#b8c5f2" },
    { fonts: [{ text: "4", top: "10%" }], background: "#e9e8fe" },
    { fonts: [{ text: "5", top: "10%" }], background: "#b8c5f2" },
  ],
  buttons: [
    {
      radius: "35%",
      background: "#8a9bf3",
      pointer: true,
      fonts: [{ text: "开始", top: "-10px" }],
    },
  ],
});
const startLuckyWheel = () => {
  // 调用抽奖组件的play方法开始游戏
  myLuckyWheel.value.play();
  // 模拟调用接口异步抽奖
  setTimeout(() => {
    // 假设后端返回的中奖索引是0
    const index = 0;
    // 调用stop停止旋转并传递中奖索引
    myLuckyWheel.value.stop(index);
  }, 3000);
};
const endLuckyWheel = (prize) => {
  console.log(prize);
};

// 九宫格
const myLuckyGrid = ref({
  blocks: [
    { padding: "10px", background: "#869cfa" },
    { padding: "10px", background: "#e9e8fe" },
  ],
  prizes: [
    { x: 0, y: 0 },
    { x: 1, y: 0 },
    { x: 2, y: 0 },
    { x: 2, y: 1 },
    { x: 2, y: 2 },
    { x: 1, y: 2 },
    { x: 0, y: 2 },
    { x: 0, y: 1 },
  ],
  buttons: [
    {
      x: 1,
      y: 1,
      background: "#9c9dd8",
      fonts: [{ text: "开始", top: "25%" }],
    },
  ],
  defaultStyle: {
    background: "#b8c5f2",
  },
});
const startLuckyGrid = () => {
  myLuckyGrid.value.play();
  setTimeout(() => {
    myLuckyGrid.value.stop(0);
  }, 3000);
};
const endLuckyGrid = (prize) => {
  console.log(prize);
};

// 老虎机
const mySlotMachine = ref({
  blocks: [
    { padding: "10px", background: "#869cfa" },
    { padding: "10px", background: "#e9e8fe" },
  ],
  slots: [
    { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
    { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
    { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
  ],
  prizes: [
    { fonts: [{ text: "0", top: "15%" }] },
    { fonts: [{ text: "1", top: "15%" }] },
    { fonts: [{ text: "2", top: "15%" }] },
    { fonts: [{ text: "3", top: "15%" }] },
    { fonts: [{ text: "4", top: "15%" }] },
    { fonts: [{ text: "5", top: "15%" }] },
    { fonts: [{ text: "6", top: "15%" }] },
    { fonts: [{ text: "7", top: "15%" }] },
    { fonts: [{ text: "8", top: "15%" }] },
    { fonts: [{ text: "9", top: "15%" }] },
  ],
  defaultStyle: {
    borderRadius: Infinity,
    background: "#bac5ee",
    fontSize: "32px",
    fontColor: "#333",
  },
  defaultConfig: {
    rowSpacing: "20px",
    colSpacing: "10px",
  },
});
const startSlotMachine = () => {
  mySlotMachine.value.play();
  setTimeout(() => {
    // 假设 4 种结果
    const res = [
      [9, 9, 6],
      [0, 0, 7],
      [6, 6, 6],
      [8, 8, 8],
    ];
    // 随机取一组数据
    const index = res[(Math.random() * 4) >> 0];
    // 调用 stop 方法停止游戏
    mySlotMachine.value.stop(index);
  }, 500);
};
const endSlotMachine = (prize) => {
  console.log(prize);
};
</script>

对于出现安装/打包失败 https://github.com/buuing/lucky-canvas/issues/258(opens new window)
可能是依赖安装问题导致的, 建议切换 node@12.22.7
然后删除 node_modules 和 **-lock.json 这两个文件
再次尝试 npm install 安装所有依赖

如果还是无法使用, 你可以直接跳转 ->【在 JS / TS 中使用】并查看方式2(这个包不会出现依赖问题, 因为他没有任何依赖)

1-3. 在React中使用（示例：LuckyWheel ）：

1.首先安装插件

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

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

2.在组件中使用

import React, { useState, useRef } from 'react'
import { LuckyWheel,LuckyGrid,SlotMachine } from '@lucky-canvas/react'

export default function App() {
  const [blocks] = useState([
    { padding: '10px', background: '#869cfa' }
  ])
  const [prizes] = useState([
    { background: '#e9e8fe', fonts: [{ text: '0' }] },
    { background: '#b8c5f2', fonts: [{ text: '1' }] },
    { background: '#e9e8fe', fonts: [{ text: '2' }] },
    { background: '#b8c5f2', fonts: [{ text: '3' }] },
    { background: '#e9e8fe', fonts: [{ text: '4' }] },
    { background: '#b8c5f2', fonts: [{ text: '5' }] },
  ])
  const [buttons] = useState([
    { radius: '40%', background: '#617df2' },
    { radius: '35%', background: '#afc8ff' },
    {
      radius: '30%', background: '#869cfa',
      pointer: true,
      fonts: [{ text: '开始', top: '-10px' }]
    }
  ])
  const myLucky = useRef()
  return <div>
    <LuckyWheel
      ref={myLucky}
      width="300px"
      height="300px"
      blocks={blocks}
      prizes={prizes}
      buttons={buttons}
      onStart={() => { // 点击抽奖按钮会触发star回调
        myLucky.current.play()
        setTimeout(() => {
          const index = Math.random() * 6 >> 0
          myLucky.current.stop(index)
        }, 2500)
      }}
      onEnd={prize => { // 抽奖结束会触发end回调
        alert('恭喜你抽到 ' + prize.fonts[0].text + ' 号奖品')
      }}
    />
  </div>
}
1-4. 在微信小程序中使用（示例：LuckyWheel ）：

1.查看小程序项目根目录下是否有package.json文件，没有再执行下面的命令来创建该文件

npm init -y

2.安装 npm 包

npm install @lucky-canvas/mini@latest

3.构建 npm

  • 微信开发者工具 -> 找到左上角
  • 点击 -> 工具
  • 点击 -> 构建 npm 弹窗提示 构建成功 即可!

4.引入自定义组件

json文件：

{
  ...
  "usingComponents": {
     "lucky-wheel": "/miniprogram_npm/@lucky-canvas/mini/lucky-wheel/index",
    "lucky-grid": "/miniprogram_npm/@lucky-canvas/mini/lucky-grid/index"
    "slot-machine": "/miniprogram_npm/@lucky-canvas/mini/slot-machine/index"
  }
  ...
}

wxml文件：

<view>
  <lucky-wheel
    id="myLucky"
    width="600rpx"
    height="600rpx"
    blocks="{{blocks}}"
    prizes="{{prizes}}"
    buttons="{{buttons}}"
    bindstart="start"
    bindend="end"
  />
</view>

js文件：

const app = getApp()
Page({
  data: {
    blocks: [{ padding: '13px', background: '#617df2' }],
    prizes: [
      { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
      { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
      { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
      { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
      { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
      { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
    ],
    buttons: [
      { radius: '50px', background: '#617df2' },
      { radius: '45px', background: '#afc8ff' },
      {
        radius: '40px', background: '#869cfa',
        pointer: true,
        fonts: [{ text: '开始\n抽奖', top: '-20px' }]
      },
    ],
  },
  start () {
    // 获取抽奖组件实例
    const child = this.selectComponent('#myLucky')
    // 调用play方法开始旋转
    child.lucky.play()
    // 用定时器模拟请求接口
    setTimeout(() => {
      // 3s 后得到中奖索引 (假设抽到第0个奖品)
      const index = 0
      // 调用stop方法然后缓慢停止
      child.lucky.stop(index)
    }, 3000)
  },
  end (event) {
    // 中奖奖品详情
    console.log(event.detail)
  }
})
1-5. 在UniApp中使用（示例：LuckyWheel ）：

1.安装插件

  • 你可以选择通过 HBuilderX 导入插件： https://ext.dcloud.net.cn/plugin?id=3499
  • 也可以选择通过 npm / yarn 安装
# npm 安装：
npm install @lucky-canvas/uni@latest

# yarn 安装：
yarn add @lucky-canvas/uni@latest

2.引入并使用

<template>
  <view>
    <LuckyWheel
      ref="myLucky"
      width="600rpx"
      height="600rpx"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallBack"
      @end="endCallBack"
    />
  </view>
</template>

<script>
 // npm 下载会默认到 node_modules 里面，直接引入包名即可
  import LuckyWheel from '@lucky-canvas/uni/lucky-wheel' // 大转盘
  import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格
  import SlotMachine from '@lucky-canvas/uni/slot-machine' // 老虎机

  // 如果你是通过 HBuilderX 导入插件，那你需要指定一下路径
  // import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel' // 大转盘
  // import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid' // 九宫格
  // import SlotMachine from '@/components/@lucky-canvas/uni/slot-machin' // 老虎机

  export default {
    components: { LuckyWheel, LuckyGrid, SlotMachine },
    data () {
      return {
        blocks: [{ padding: '13px', background: '#617df2' }],
        prizes: [
          { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
          { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
          { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
          { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
          { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
          { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
        ],
        buttons: [
          { radius: '50px', background: '#617df2' },
          { radius: '45px', background: '#afc8ff' },
          {
            radius: '40px', background: '#869cfa',
            pointer: true,
            fonts: [{ text: '开始\n抽奖', top: '-20px' }]
          },
        ],
      }
    },
    methods: {
      // 点击抽奖按钮触发回调
      startCallBack () {
        // 先开始旋转
        this.$refs.myLucky.play()
        // 使用定时器来模拟请求接口
        setTimeout(() => {
          // 假设后端返回的中奖索引是0
          const index = 0
          // 调用stop停止旋转并传递中奖索引
          this.$refs.myLucky.stop(index)
        }, 3000)
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
      }
    }
  }
</script>
1-6. 在 Taro 中使用（示例：LuckyWheel ）：

1.安装

# npm 安装：
npm install @lucky-canvas/taro@latest

# yarn 安装：
yarn add @lucky-canvas/taro@latest

2.使用

# Taro-vue2
<template>
  <view>
    <LuckyWheel
      ref="myLucky"
      width="600rpx"
      height="600rpx"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    ></LuckyWheel>
  </view>
</template>

<script>
import { LuckyWheel } from '@lucky-canvas/taro/vue'
export default {
  components: { LuckyWheel },
  data () {
    return {
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }]
        },
      ],
    }
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback () {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index)
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback (prize) {
      console.log(prize)
    },
  }
}
</script>

# Taro-vue3
<template>
  <view>
    <LuckyWheel
      ref="myLucky"
      width="600rpx"
      height="600rpx"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    ></LuckyWheel>
  </view>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'
import { LuckyWheel } from '@lucky-canvas/taro/vue'
export default {
  components: { LuckyWheel },
  setup () {
    const myLucky = ref(null)
    const state = reactive({
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }]
        },
      ],
    })
    // 点击抽奖按钮会触发star回调
    function startCallback () {
      // 调用抽奖组件的play方法开始游戏
      myLucky.value.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        myLucky.value.stop(index)
      }, 3000)
    }
    // 抽奖结束会触发end回调
    function endCallback (prize) {
      console.log(prize)
    }
    return {
      ...toRefs(state),
      startCallback,
      endCallback,
      myLucky
    }
  }
}
</script>

# Taro-react
import React from 'react'
import { LuckyWheel } from '@lucky-canvas/taro/react'

export default class Index extends React.Component {
  constructor () {
    super()
    this.myLucky = React.createRef()
    this.state = {
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }]
        },
      ],
    }
  }
  render () {
    return <LuckyWheel
      ref={this.myLucky}
      width='300px'
      height='300px'
      blocks={this.state.blocks}
      prizes={this.state.prizes}
      buttons={this.state.buttons}
      onStart={() => { // 点击抽奖按钮会触发star回调
        // 调用抽奖组件的play方法开始游戏
        this.myLucky.current.play()
        // 模拟调用接口异步抽奖
        setTimeout(() => {
          // 假设后端返回的中奖索引是0
          const index = 0
          // 调用stop停止旋转并传递中奖索引
          this.myLucky.current.stop(index)
        }, 2500)
      }}
      onEnd={prize => { // 抽奖结束会触发end回调
        console.log(prize)
      }}
    ></LuckyWheel>
  }
}

大转盘 < LuckyWheel /> 参数介绍：

在这里插入图片描述

九宫格 < LuckyGrid /> 参数介绍：

在这里插入图片描述

老虎机 < SlotMachine /> 参数介绍：

在这里插入图片描述
以上便是对 lucky-canvas 抽奖插件的具体介绍和简易Dome，有常用问题我们可以通过lucky-canvas官方文档去了解解决，而这个高度自定义的插件组件适合我们做活动项目中的抽奖组件，有兴趣的小伙伴们可以了解并学习下！

lucky-canvas 官网：https://100px.net/
lucky-canvas 中文文档：https://100px.net/docs/wheel.html
lucky-canvas github地址：https://github.com/buuing/lucky-canvas

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2104171.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

一篇常见第三方库之以及详细使用示例教程

一篇常见第三方库之以及详细使用示例教程

作者&#xff1a;郭震 我们介绍了几个常用的 Python 第三方库,包括 NumPy、Pandas、Matplotlib 和 Requests.本篇将通过一些简单的示例来演示如何有效地使用这些库,以帮助小白理解它们的基本用法.通过这些案例,你可以直观感受到这些库在日常编程中的价值. NumPy NumPy 是一个强…
阅读更多...
计算机毕业设计选题推荐-动漫网站-动漫管理系统-Java/Python

计算机毕业设计选题推荐-动漫网站-动漫管理系统-Java/Python

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…
阅读更多...
虚拟化pve查看存储空间使用情况

虚拟化pve查看存储空间使用情况

通过命令行查看 pvesm 是 Proxmox VE 的存储管理工具&#xff0c;可以用来查看存储空间的使用情况。 pvesm status这个命令会列出所有配置的存储设备及其使用情况&#xff0c;包括总空间、已用空间和可用空间。 在 Proxmox VE (PVE) 中&#xff0c;local 和 local-lvm 是两种…
阅读更多...
软考超详细准备之软件设计师的计算机系统题型一(上午题)

软考超详细准备之软件设计师的计算机系统题型一(上午题)

目录 考试技巧: 上午题: 下午题: 第一道数据流图 第二道数据库 第三道 UML 第四道算法题 第五道程序题 软考刷题之计算机系统 cpu 相关习题 运算器 相关习题 控制器 相关习题 计算机的基本单位: 加法: ​编辑 加减法 相关习题 数据表示 各种码制的范围 相…
阅读更多...
AI时代的信仰是什么

AI时代的信仰是什么

信仰是人们内心深处的信念&#xff0c;是推动人类前进的驱动力。AI从几十年前的缓慢探索&#xff0c;到如今的飞速发展&#xff0c;是什么信仰在驱动这一切呢&#xff1f; 摩尔定律 聊起信仰&#xff0c;我就会想起信息时代的摩尔定律。摩尔定律是由英特尔联合创始人戈登摩尔…
阅读更多...
微信支付开通商家转账到零钱方法【必过技巧】

微信支付开通商家转账到零钱方法【必过技巧】

自从微信支付关闭&#xff0c;企业付款到零钱后&#xff0c;改成了商家转账到零钱&#xff0c;申请开通这一功能审核很严格。想把微信商户里的钱转到个人微信上就很麻烦了。 首先看下开通条件 开通条件 暂时不支持小微商户、个体工商户。 保持正常健康交易。 转账规则 日限…
阅读更多...
【LabVIEW学习篇 - 17】：人机交互界面设计01

【LabVIEW学习篇 - 17】：人机交互界面设计01

文章目录 VI属性设置编辑器选项窗口外观窗口大小窗口运行时的位置执行 对话框对话框使用范例自定义对话框 VI属性设置 在LabVIEW中&#xff0c;设计人机交互界面还是很方便的&#xff0c;主要是因为LabVIEW针对行业特点提供了丰富的控件&#xff0c;使其具有极其强大的图形数据…
阅读更多...
智能提醒助理系列-基础设施准备

智能提醒助理系列-基础设施准备

本系列文章记录“智能提醒助理”wx公众号 建设历程。 一、需求背景 建设一个智能提醒小程序&#xff0c;通过公众号、短信、电话提醒用户。 提供以下能力&#xff1a; 1、节日提醒&#xff1a;生日、节日、纪念日问候祝福。 2、健康守护&#xff1a;喝水、久坐、健身、用药提…
阅读更多...
在vscode中用virtual env的方法

在vscode中用virtual env的方法

vscode是非常常用的软件开发工具。我们也非常了解如何使用vscode开发python的基本方法。当然&#xff0c;vscode可以开发基本所有编程语言。真的是又大又全又好用。 那么为什么要在vscode里面使用virtual env呢&#xff1f;因为python开发会遇到包管理的问题。而virtual env可…
阅读更多...
个人博客新引导主页html源码

个人博客新引导主页html源码

源码介绍 个人博客新引导主页html源码&#xff0c;随机背景&#xff0c;字体颜色变换&#xff0c;记事本打开自己动手修改一下就可以啦。 效果预览 源码获取 个人博客新引导主页html源码
阅读更多...
【uni-app】通过 HBuilderX 创建 uni-app vue3项目

【uni-app】通过 HBuilderX 创建 uni-app vue3项目

1.下载 HbuilderX 编辑器 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html 点击首页的 DOWNLOAD 按钮 选择下载 正式版 -> App 开发版 2. 安装 HBuilderX 将下载的 zip包 进行解压缩 将解压之后的文件夹&#xff0c;存放到纯英文的目录中&#xff08;且…
阅读更多...
如何选择合适的PLC工业网关？天拓四方

如何选择合适的PLC工业网关？天拓四方

在现代工业自动化领域&#xff0c;PLC工业网关在提升生产效率、确保产品质量、增强系统可靠性等方面发挥着重要作用。为了满足不同工业应用场景的需求&#xff0c;如何选择合适的PLC工业网关成为了一个关键问题。以下是选择PLC工业网关时应考虑的几个重要因素&#xff1a; 兼容…
阅读更多...
【ACM独立出版｜EI快检索-高录用｜IEEE Fellow支持】2024年数字经济与计算机科学国际学术会议（DECS2024）

【ACM独立出版｜EI快检索-高录用｜IEEE Fellow支持】2024年数字经济与计算机科学国际学术会议（DECS2024）

【ACM独立出版&#xff5c;EI快检索-高录用&#xff5c;IEEE Fellow支持】 2024年数字经济与计算机科学国际学术会议&#xff08;DECS2024&#xff09; *ACM独立出版&#xff0c;快检索&#xff0c;高录用 *见刊后1个月左右完成EI&Scopus检索 *国内211大学、世界QS名校…
阅读更多...
【路径规划】在MATLAB中使用粒子群优化（PSO）进行最优移动机器人路径规划

【路径规划】在MATLAB中使用粒子群优化（PSO）进行最优移动机器人路径规划

摘要 本文介绍了使用粒子群优化&#xff08;Particle Swarm Optimization, PSO&#xff09;算法实现移动机器人的路径规划。PSO是一种基于群体智能的优化算法&#xff0c;通过模拟粒子群体在搜索空间中的迭代更新&#xff0c;找到全局最优路径。本文通过MATLAB仿真展示了PSO在…
阅读更多...
不同分辨率下页面自适应方法

不同分辨率下页面自适应方法

首先在utils文件下新建一个js文件命名为screenSize.js 然后在需要做自适应的页面文件中引入import {screenSize} from ‘/utils/screenSize’ 最外层div中用ref命名 最后在mounted中使用该方法 记得style中给login宽1920px,高1080px
阅读更多...
慎投！双1区 SSCI TOP刊竟也被On Hold预警！你踩雷了吗？

慎投！双1区 SSCI TOP刊竟也被On Hold预警！你踩雷了吗？

点击关注&#xff1a;关注GZH【欧亚科睿学术】&#xff0c;第一时间了解科研最新动态&#xff01; 本期小编给大家解析的是文学类《Comunicar》期刊&#xff0c;中文名称为《交流》&#xff0c;所有文章均为西班牙语和英语双语&#xff0c;值得一提的是被中科院分区为1区TOP的期…
阅读更多...
由一个 SwiftData “诡异”运行时崩溃而引发的钩深索隐（二）

由一个 SwiftData “诡异”运行时崩溃而引发的钩深索隐（二）

概述 从 WWDC 23 开始&#xff0c;苹果推出了崭新的数据库框架 SwiftData。默认在 SwiftData 中所有对数据的操作都会在主线程中进行&#xff0c;稍有不慎就会让 App 变得“鹅行鸭步” 那么&#xff0c;对于耗时的数据操作我们该如何优雅的面对&#xff1f;又如何让界面与其“…
阅读更多...
开放式耳机的优缺点？有什么推荐吗？四款开放式蓝牙耳机推荐

开放式耳机的优缺点？有什么推荐吗？四款开放式蓝牙耳机推荐

开放式耳机的优点有很多其实&#xff0c;但是每个东西多多少少都是一把双刃剑&#xff0c;所以缺点当然也是有的。那就先讲它的优点&#xff1a; 首先因为不入耳的设计&#xff0c;耳机不是直接塞入耳道的&#xff0c;所以能让耳道保持“呼吸”&#xff0c;减少长时间佩戴导致…
阅读更多...
基于 AT 固件测试 ESP32 设备作为 WiFi AP 模式创建 TCP Server 开启 UART-to-WiFi 透传模式的指令序列

基于 AT 固件测试 ESP32 设备作为 WiFi AP 模式创建 TCP Server 开启 UART-to-WiFi 透传模式的指令序列

AT 指令序列如下 ATRESTOREATCWMODE2 // Set the Wi-Fi mode toSoftAP.ATCWSAP"ESP32_softAP","1234567890",5,3 // Set softAPATCIPMUX1 // Enable multiple connections for TCP ServerATCIPSERV…
阅读更多...
Windows安装使用Docker

Windows安装使用Docker

配置Dorker环境 启用或关闭windows功能 安装wsl 以管理员身份打开windows PowerShell&#xff0c;安装相关配置 下载docker应用程序 Releases tech-shrimp/docker_installer (github.com) 安装Docker 默认双击程序就开始安装了&#xff0c;要安装在指定位置&#xff0c;提…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023