【lucky-canvas插件】在Vue3实现大转盘九宫格老虎机抽奖

news2024/9/25 21:30:40

目录

前言

一、lucky-canvas介绍

二、lucky-canvas使用（Vue3）

1. 安装

2. 注册

3. 使用

三、九宫格为例的具体使用

1. 组件使用

2. 常用配置

① blocks 背景

② prizes 奖品

③ buttons 抽奖按钮

3. 回调函数

① start 开始抽奖前

② end 结束抽奖后

 4. 组件方法

① init() 初始化

② play() 开始抽奖

③ stop() 缓慢停止

四、三种抽奖完整代码示例

1. 转盘

2.九宫格

3.老虎机

前言

平时做项目时常会遇到抽奖需求。如果一个一个原生手敲的话，很费时间。所以找到了一款抽奖插件——lucky-canvas，一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。可以满足绝大部分的项目需求。（高定制并且细节较多的话仍需原生手写）。

本文将介绍该插件的使用方法，并以vue3项目举例。

一、lucky-canvas介绍

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

该插件可以在跨平台使用，比如：

 该插件也提供了各种示例，有基础示例和完整示例，比如：

 

并且提供了api文档：

二、lucky-canvas使用（Vue3）

1. 安装

这里是以Vue为例，所以下载的是 @lucky-canvas/vue，如果是其他框架，比如是react，就是下载@lucky-canvas/vue/react，依此类推。

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

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

# 或者 pnpm 安装
pnpm install @lucky-canvas/vue@latest

2. 注册

main.ts:

// 完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'

const app = createApp(App)
app.use(VueLuckyCanvas)
app.mount('#app')

3. 使用

直接在template里面以组件的形式进行使用。

官网的Vue3示例只提供了转盘，名称如下：

 其余的，九宫格对应为LuckyGrid，老虎机对应为SlotMachine。

三、九宫格为例的具体使用

1. 组件使用

使用组件，并且给定默认宽高和背景。

<template>
  <LuckyGrid
    ref="myLucky"
    width="600px"
    height="600px"
    :blocks="blocks"
  />
</template>

<script setup lang="ts">
  const myLucky = ref<any>(null)
  const blocks = [{ padding: '13px', background: '#617df2' }]
</script>

会出现：

其中的blocks，就是九宫格盒子的背景。也是我们接触到的第一个配置。 

2. 常用配置

① blocks 背景

用数组表示。

② prizes 奖品

用数组表示。

x和y是相对坐标，x表示第几行，y表示第几列。

font是文字，并且可以通过top设置距离顶部的距离。还有很多其他字段，可以设置字体颜色大小等等。

background是背景，背景还可以通过imgs字段替换成图片。

<template>
  <LuckyGrid
    ref="myLucky"
    width="600px"
    height="600px"
    :blocks="blocks"
    :prizes="prizes"
  />
</template>

<script setup lang="ts">
  const myLucky = ref<any>(null)
  const prizes = [
    { x: 0, y: 0, fonts: [{ text: '0', top: '25%' }], background: '#b3c8fa' },
    { x: 1, y: 0, fonts: [{ text: '1', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 0, fonts: [{ text: '2', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 1, fonts: [{ text: '3', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 2, fonts: [{ text: '4', top: '25%' }], background: '#b3c8fa' },
    { x: 1, y: 2, fonts: [{ text: '5', top: '25%' }], background: '#b3c8fa' },
    { x: 0, y: 2, fonts: [{ text: '6', top: '25%' }], background: '#b3c8fa' },
    { x: 0, y: 1, fonts: [{ text: '7', top: '25%' }], background: '#b3c8fa' }
  ]
</script>

③ buttons 抽奖按钮

加了抽奖按钮后，中间的空就填好了。

x和y是相对坐标，x表示第几行，y表示第几列。

font是文字，并且可以通过top设置距离顶部的距离。还有很多其他字段，可以设置字体颜色大小等等。

background是背景，背景还可以通过imgs字段替换成图片。

<template>
  <LuckyGrid
    ref="myLucky"
    width="600px"
    height="600px"
    :blocks="blocks"
    :prizes="prizes"
    :buttons="buttons"
  />
</template>

<script setup lang="ts">
  const myLucky = ref<any>(null)
  const prizes = [
    { x: 0, y: 0, fonts: [{ text: '0', top: '25%' }], background: '#b3c8fa' },
    { x: 1, y: 0, fonts: [{ text: '1', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 0, fonts: [{ text: '2', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 1, fonts: [{ text: '3', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 2, fonts: [{ text: '4', top: '25%' }], background: '#b3c8fa' },
    { x: 1, y: 2, fonts: [{ text: '5', top: '25%' }], background: '#b3c8fa' },
    { x: 0, y: 2, fonts: [{ text: '6', top: '25%' }], background: '#b3c8fa' },
    { x: 0, y: 1, fonts: [{ text: '7', top: '25%' }], background: '#b3c8fa' }
  ]
  const blocks = [{ padding: '13px', background: '#617df2' }]
  const buttons = [
    {
      x: 1,
      y: 1,
      background: '#7f95d1',
      fonts: [{ text: '开始', top: '25%' }]
    }
  ]
</script>

3. 回调函数

<template>
  <LuckyGrid
    ref="myLucky"
    width="600px"
    height="600px"
    :prizes="prizes"
    :blocks="blocks"
    :buttons="buttons"
    @start="startCallback"
    @end="endCallback"
  />
</template>
<script setup lang="ts">
  const myLucky = ref<any>(null)
  const prizes = [
    { x: 0, y: 0, fonts: [{ text: '0', top: '25%' }], background: '#b3c8fa' },
    { x: 1, y: 0, fonts: [{ text: '1', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 0, fonts: [{ text: '2', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 1, fonts: [{ text: '3', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 2, fonts: [{ text: '4', top: '25%' }], background: '#b3c8fa' },
    { x: 1, y: 2, fonts: [{ text: '5', top: '25%' }], background: '#b3c8fa' },
    { x: 0, y: 2, fonts: [{ text: '6', top: '25%' }], background: '#b3c8fa' },
    { x: 0, y: 1, fonts: [{ text: '7', top: '25%' }], background: '#b3c8fa' }
  ]
  const blocks = [{ padding: '13px', background: '#617df2' }]
  const buttons = [
    {
      x: 1,
      y: 1,
      background: '#7f95d1',
      fonts: [{ text: '开始', top: '25%' }]
    }
  ]

  // 点击抽奖按钮会触发star回调
  function startCallback() {
    console.log(myLucky?.value)
    // 调用抽奖组件的play方法开始游戏
    myLucky?.value?.play()
    // 模拟调用接口异步抽奖
    setTimeout(() => {
      // 假设后端返回的中奖索引是0
      const index = 0
      // 调用stop停止旋转并传递中奖索引
      myLucky?.value?.stop(index)
    }, 3000)
  }
  // 抽奖结束会触发end回调
  function endCallback(prize: any) {
    console.log(prize)
  }
</script>
<style scoped lang="scss"></style>

① ① start 开始抽奖前

当点击抽奖按钮时, 触发该回调, 此时你可以决定是否要开始游戏。如果你是多按钮, 则可以通过第二个参数知道是哪个按钮触发的抽奖

② end 结束抽奖后

当游戏完全结束后, 触发该回调, 你可以在此时弹窗恭喜用户。参数则是中奖的奖品。

 4. 组件方法

① init() 初始化

调用该方法时, 会立刻停止游戏, 回到最初始的状态。

② play() 开始抽奖

调用该方法时, 游戏才会开始。

③ stop() 缓慢停止

调用该方法时, 才会缓慢停止, 参数就是中奖奖品的索引。

四、三种抽奖完整代码示例

1. 转盘

<template>
  <LuckyWheel
    ref="myLucky"
    width="300px"
    height="300px"
    :prizes="prizes"
    :blocks="blocks"
    :buttons="buttons"
    @start="startCallback"
    @end="endCallback"
  />
</template>
<script setup lang="ts">
  const myLucky = ref<any>(null)
  const 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' }] }
  ]
  const blocks = [{ padding: '10px', background: '#869cfa' }]
  const buttons = [
    { radius: '40%', background: '#617df2' },
    { radius: '35%', background: '#afc8ff' },
    {
      radius: '30%',
      background: '#869cfa',
      pointer: true,
      fonts: [{ text: '开始', top: '-10px' }]
    }
  ]

  // 点击抽奖按钮会触发star回调
  function startCallback() {
    console.log(myLucky?.value)
    // 调用抽奖组件的play方法开始游戏
    myLucky?.value?.play()
    // 模拟调用接口异步抽奖
    setTimeout(() => {
      // 假设后端返回的中奖索引是0
      const index = 0
      // 调用stop停止旋转并传递中奖索引
      myLucky?.value?.stop(index)
    }, 3000)
  }
  // 抽奖结束会触发end回调
  function endCallback(prize: any) {
    console.log(prize)
  }
</script>
<style scoped lang="scss"></style>

2.九宫格

<template>
  <LuckyGrid
    ref="myLucky"
    width="600px"
    height="600px"
    :prizes="prizes"
    :blocks="blocks"
    :buttons="buttons"
    @start="startCallback"
    @end="endCallback"
  />
</template>
<script setup lang="ts">
  const myLucky = ref<any>(null)
  const prizes = [
    { x: 0, y: 0, fonts: [{ text: '0', top: '25%' }], background: '#b3c8fa' },
    { x: 1, y: 0, fonts: [{ text: '1', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 0, fonts: [{ text: '2', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 1, fonts: [{ text: '3', top: '25%' }], background: '#b3c8fa' },
    { x: 2, y: 2, fonts: [{ text: '4', top: '25%' }], background: '#b3c8fa' },
    { x: 1, y: 2, fonts: [{ text: '5', top: '25%' }], background: '#b3c8fa' },
    { x: 0, y: 2, fonts: [{ text: '6', top: '25%' }], background: '#b3c8fa' },
    { x: 0, y: 1, fonts: [{ text: '7', top: '25%' }], background: '#b3c8fa' }
  ]
  const blocks = [{ padding: '13px', background: '#617df2' }]
  const buttons = [
    {
      x: 1,
      y: 1,
      background: '#7f95d1',
      fonts: [{ text: '开始', top: '25%' }]
    }
  ]

  // 点击抽奖按钮会触发star回调
  function startCallback() {
    console.log(myLucky?.value)
    // 调用抽奖组件的play方法开始游戏
    myLucky?.value?.play()
    // 模拟调用接口异步抽奖
    setTimeout(() => {
      // 假设后端返回的中奖索引是0
      const index = 0
      // 调用stop停止旋转并传递中奖索引
      myLucky?.value?.stop(index)
    }, 3000)
  }
  // 抽奖结束会触发end回调
  function endCallback(prize: any) {
    console.log(prize)
  }
</script>
<style scoped lang="scss"></style>

3.老虎机

<template>
  <SlotMachine
    ref="myLucky"
    width="800px"
    height="600px"
    :blocks="blocks"
    :slots="slots"
    :prizes="prizes"
    :default-style="defaultStyle"
    :default-config="defaultConfig"
  />
  <button @click="handleStart">开始</button>
</template>
<script setup lang="ts">
  const myLucky = ref<any>(null)
  const slots = [{ order: [0, 1, 2] }, { order: [2, 0, 1] }, { order: [1, 2, 0] }] // 一开始的排序
  const prizes = [
    {
      background: 'red',
      borderRadius: '10px'
    },
    {
      background: 'blue',
      borderRadius: '10px'
    },
    {
      background: 'green',
      borderRadius: '10px'
    }
  ]
  const defaultStyle = {
    borderRadius: Infinity,
    background: '#bac5ee',
    fontSize: '32px',
    fontColor: '#333'
  }
  const defaultConfig = {
    rowSpacing: '25px',
    colSpacing: '10px'
  }
  const blocks = [
    { padding: '10px', background: '#869cfa' },
    { padding: '10px', background: '#e9e8fe' }
  ]

  // 点击抽奖按钮会触发star回调
  function handleStart() {
    myLucky.value.play()
    setTimeout(() => {
      const prizeIndex = 1 // prizes的索引，蓝色
      myLucky.value.stop(prizeIndex)
    }, 2000)
  }
</script>
<style scoped lang="scss"></style>

更多可见官网：100px.net | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫格 & 老虎机】抽奖插件icon-default.png?t=N7T8https://100px.net/

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

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

相关文章

【Flask】from flask_sqlalchemy import SQLAlchemy报错

【Flask】from flask_sqlalchemy import SQLAlchemy报错

【可能出现的情况】 1、未安装 Flask-SQLAlchemy&#xff1a; 在使用 flask_sqlalchemy 之前&#xff0c;你需要确保已经通过 pip 安装了 Flask-SQLAlchemy。可以通过以下命令安装它&#xff1a; pip install Flask-SQLAlchemy 2、包名大小写问题&#xff1a; Python 是区分大…
阅读更多...
css让多个盒子强制自动等宽

css让多个盒子强制自动等宽

1.width: calc( 100 / n% ) 2.display:flex; flex:1;width:100px; 3.display:grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 但是其中某一个内容较长的时候 会破坏1:1:1的平衡 这个时候发现附件名字过长导致不等比例&#xff0c;通过查看阮一峰flex文…
阅读更多...
《人生苦短，我学Python》——布尔类型 比较运算 逻辑运算

《人生苦短，我学Python》——布尔类型 比较运算 逻辑运算

&#x1f448;前三天&#xff0c;我们学了字符串、整型、浮点型这三种数据类型。今天我们将学习最后一种数据类型&#xff1a;布尔型。简单来说&#xff0c;布尔型就是“真”&#xff08;True&#xff09;和“假”&#xff08;False&#xff09;。下面就让我们来详细看看吧&…
阅读更多...
13.动态渲染侧边栏

13.动态渲染侧边栏

为什么要动态渲染&#xff1f; 比如我们现在需要以下侧边栏的数据&#xff1a; 如果一个个的去写标签会很麻烦&#xff0c;发现导航栏中的数据分为两类&#xff0c;一类是一级导航&#xff0c;另一位是二级导航&#xff08;有子页&#xff09;&#xff0c;因此直接写两个函数判…
阅读更多...
Docker从认识到实践再到底层原理（二-1）｜容器技术发展史+虚拟化容器概念和简介

Docker从认识到实践再到底层原理（二-1）｜容器技术发展史+虚拟化容器概念和简介

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…
阅读更多...
20230831工作心得：SQL这块花了挺多时间

20230831工作心得：SQL这块花了挺多时间

1、SQL语句的问题 1、SQL这块花了挺多时间 1、理解业务 要之前自己要查什么数据&#xff0c;再去写SQL&#xff0c;这句话看起来像一句废话&#xff0c;但是很多时候&#xff0c;不知道自己在干嘛。 2、时间 1、需要查询哪个时间字段 表里有很多time有create_time&#…
阅读更多...
【2】openGL shader着色器分析三角形填色

【2】openGL shader着色器分析三角形填色

源代码在下面。文档查询 > docs.gl 结果展示&#xff1a;使用自己的shader和打印错误描述 该篇主要在上一部分代码的基础上添加了自己写的shader&#xff0c;即着色器。最常用的两个着色器 vertex shader 和 fragment shader&#xff0c;即顶点着色器和片段着色器。 大概…
阅读更多...
嵌入式行业——选择比努力重要

嵌入式行业——选择比努力重要

嵌入式开发可以说是一个较大的类别&#xff0c;也可以看作是应用技术的一种广义称谓。它在不同的工业和行业场景中应用不同的业务模式和领域。 举个例子&#xff0c;嵌入式技术结合基站通信技术&#xff0c;就构成了华为基站&#xff1b;嵌入式技术结合视频处理/图像处理技术&a…
阅读更多...
如何使用CSS实现一个响应式图片幻灯片（Responsive Image Slider）效果？

如何使用CSS实现一个响应式图片幻灯片（Responsive Image Slider）效果？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 响应式图片幻灯片⭐ HTML结构⭐ CSS样式⭐ JavaScript交互⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个…
阅读更多...
快速排序（Quit Sort）

快速排序（Quit Sort）

C自学精简教程 目录(必读) 快速排序 每次都把数据分成左右两部分&#xff0c;左边的小于某个数&#xff0c;右边的大于某个数。 递归操作左侧和右侧&#xff0c;最终完成所有数据的排序。 输入数据 72 6 57 88 60 42 83 73 48 85 执行过程 快速排序&#xff0c;选取位于…
阅读更多...
【100天精通python】Day50：python web编程_web框架，Flask的使用

【100天精通python】Day50：python web编程_web框架，Flask的使用

目录 1 Web 框架 2 python 中常用的web框架 3 Flask 框架的使用 3.1 Flask框架安装 3.2 第一个Flask程序 3.3 路由 3.3.1 基本路由 3.3.2 动态路由 3.3.3 HTTP 方法 3.3.4 多个路由绑定到一个视图函数 3.3.5 访问URL 参数的路由 3.3.6 带默认值的动态路由 3.3.7 带…
阅读更多...
成都智慧企业发展研究院总经理郑小华：践行双轮驱动，为能源电力数智化注入新活力丨数据猿专访...

成都智慧企业发展研究院总经理郑小华：践行双轮驱动，为能源电力数智化注入新活力丨数据猿专访...

大数据产业创新服务媒体 ——聚焦数据 改变商业 随着全球经济走向数字化&#xff0c;中国正处于这一浪潮的前沿&#xff0c;进行前所未有的技术与产业深度融合。政府在2023年2月印发的《数字中国建设整体布局规划》等政策下&#xff0c;明确展示了对数字经济的支持与鼓励&…
阅读更多...
虚拟机Ubuntu20.04 网络连接器图标开机不显示怎么办

虚拟机Ubuntu20.04 网络连接器图标开机不显示怎么办

执行以下指令&#xff1a; sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service network-manager start
阅读更多...
SPSS统计作图教程：频率多边形

SPSS统计作图教程：频率多边形

SPSS统计作图教程&#xff1a;频率多边形 1、问题与数据 某研究者想了解某数据集中最大携氧能力&#xff08;VO2max&#xff09;是否服从正态分布&#xff0c;部分数据如图1。研究者应如何绘图查看呢&#xff1f; 图1 部分数据 2、对问题的分析 研究者想绘图展示最大携氧能…
阅读更多...
Collections.singletonList、Arrays.asList与ImmutableList.of

Collections.singletonList、Arrays.asList与ImmutableList.of

文章目录 ListArrayListLinkedListArrayList与LinkedList的区别快速构建list集合Collections.singletonListArrays.asListImmutableList.of Java集合类型有三种&#xff1a;set(集)、list(列表)和map(映射)&#xff0c;而List集合是很常用的一种集合类型&#xff0c; List 我…
阅读更多...
【算法训练-模拟 一】模拟设计LRU缓存结构

【算法训练-模拟 一】模拟设计LRU缓存结构

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是LRU缓存结构设计&#xff0c;这类题目出现频率还是很高的&#xff0c;几乎所有大厂都常考。 当然面对这道题&#xff0c;首先要讲清楚LRU是干什么…
阅读更多...
使用环境中的视觉地标和扩展卡尔曼滤波器定位移动机器人研究（Matlab代码实现）

使用环境中的视觉地标和扩展卡尔曼滤波器定位移动机器人研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
go学习part19(3)协程求素数

go学习part19(3)协程求素数

1.代码 intChan存放原始数据 primeChan存放检验之后的素数 exitChan存放几个协程的状态 package mainimport ("fmt""time" )/* 求素数 */ //放入1-8000个数 func putNum(intChan chan int) {for i : 2; i < 8000; i {intChan <- i}//关闭intChanc…
阅读更多...
Java 设计模式实战系列—单例模式

Java 设计模式实战系列—单例模式

本文首发公众号&#xff1a;小码A梦 单例模式是设计模式中最简单一个设计模式&#xff0c;该模式属于创建型模式&#xff0c;它提供了一种创建实例的最佳方式。 单例模式的定义也比较简单&#xff1a;一个类只能允许创建一个对象或者实例&#xff0c;那么这个类就是单例类&…
阅读更多...
Unity 之ToolTip的用法

Unity 之ToolTip的用法

文章目录 在Unity中&#xff0c;ToolTip是一个在编辑器中使用的UI元素&#xff0c;它提供了鼠标悬停在某个对象或控件上时显示的文本信息。ToolTip通常用于向开发人员提供有关对象、字段、控件或菜单项的附加信息&#xff0c;从而帮助他们更好地理解和使用这些元素。 ToolTip通…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023