lucky"/>
【lucky
目录
前言
一、lucky-canvas介绍
二、lucky-canvas使用(Vue3)
1. 安装
2. 注册
3. 使用
三、九宫格为例的具体使用
1. 组件使用
2. 常用配置
① blocks 背景
② prizes 奖品
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><LuckyGridref="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><LuckyGridref="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><LuckyGridref="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><LuckyGridref="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(() => {// 假设后端返回的中奖索引是0const 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><LuckyWheelref="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(() => {// 假设后端返回的中奖索引是0const index = 0// 调用stop停止旋转并传递中奖索引myLucky?.value?.stop(index)}, 3000)}// 抽奖结束会触发end回调function endCallback(prize: any) {console.log(prize)}
</script>
<style scoped lang="scss"></style>
2.九宫格
<template><LuckyGridref="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(() => {// 假设后端返回的中奖索引是0const index = 0// 调用stop停止旋转并传递中奖索引myLucky?.value?.stop(index)}, 3000)}// 抽奖结束会触发end回调function endCallback(prize: any) {console.log(prize)}
</script>
<style scoped lang="scss"></style>
3.老虎机
<template><SlotMachineref="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 | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫格 & 老虎机】抽奖插件/
更多推荐
【lucky
发布评论