vue2插件之@lucky-canvas/vue，大转盘、抽奖、老虎机

提示：vue2插件

文章目录

    • @[TOC](文章目录)
  • 前言
  • 一、查看nodejs版本
  • 二、创建项目
  • 三、大转盘
  • 四、抽奖
  • 五、老虎机
  • 六、官网
  • 总结

前言

@lucky-canvas/vue

一、查看nodejs版本

node -v

在这里插入图片描述

二、创建项目

1、安装插建

npm install @lucky-canvas/vue --save

在这里插入图片描述
在这里插入图片描述
2、目录结构
在这里插入图片描述
3、引用main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import VueLuckyCanvas from '@lucky-canvas/vue';
Vue.use(VueLuckyCanvas);
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

4、配置路由src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import LuckyWheel  from '@/components/LuckyWheel.vue';
import LuckyGrid  from '@/components/LuckyGrid.vue';
import SlotMachine   from '@/components/SlotMachine .vue';
Vue.use(Router);
const routes = [
    { path: '/', component: LuckyWheel  },
    { path: '/lucky-wheel', component: LuckyWheel  },
    { path: '/lucky-grid', component: LuckyGrid  },
    { path: '/slot-machine', component: SlotMachine },
  ]
export default new Router({ routes })

三、大转盘

1、src/components/LuckyWheel.vue

<template>
  <div class="lucky_wheel">
    <h1>LuckyWheel页面</h1>
    <template>
    <LuckyWheel
      ref="myLucky"
      width="400px"
      height="400px"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    />
</template>
</div>
</template>

<script>
export default {
  name: 'LuckyWheel1',
  data () {
    return {
      //转盘背景
      blocks: [
        { 
          padding: '40px',     //可旋转区域与转盘边缘的距离
          background: '#eee',  //转盘背景色
          //转盘背景图
          imgs:[
            {
              src:require('@/assets/LuckyWheel.png'),   //图片url
              top:'0',     //图片距顶部距离
              width:'400px',  //图片宽
              height:'400px', //图片高
            }
          ],
        }
      ],
      // 扇形数组
      prizes: [
        //单个扇形
        { 
          //奖品文字
          fonts: [
            { 
              text: '苹果',        //文字
              top: '10%',          //文字距顶部距离
              fontColor:'#f00',    //文字颜色
              fontSize:'16px',     //文字大小
              fontStyle:'微软雅黑', //字体
              fontWeight:'500',    //加粗
              lineHeight:'16px',   //行高
              wordWrap:true,       //换行
              lineClamp:2,         //2行，剩下的...
              wordWrap:true,       //换行
            }
          ], 
          //奖品图
          imgs:[
            {
              src:'https://img95.699pic.com/xsj/1s/5e/0g.jpg%21/fh/300',   //图片url
              top:'30%',     //图片距顶部距离
              width:'60px',  //图片宽
              height:'60px', //图片高
            }
          ],
          background: '#FFF402',  //扇形背景色
          range:10,  //当前prize.range/所有prize中range总和
        },
        { fonts: [{ text: '橘子', top: '10%' }], background: '#76C5F0' },
        { fonts: [{ text: '香蕉', top: '10%' }], background: '#2A1570' },
        { fonts: [{ text: '葡萄', top: '10%' }], background: '#009241' },
        { fonts: [{ text: '芒果', top: '10%' }], background: '#DD167B' },
        { fonts: [{ text: '西瓜', top: '10%' }], background: '#F8C301' },
        { fonts: [{ text: '柠檬', top: '10%' }], background: '#E77841' },
        { fonts: [{ text: '柚子', top: '10%' }], background: '#42929D' },
        { fonts: [{ text: '山竹', top: '10%' }], background: '#E3556B' },
      ],
      
      buttons: [{
        radius: '35%',
        // background: '#333',
        pointer: true,
        fonts: [
          { 
            text: '点击抽奖',        //文字
            top: '-15%',          //文字距顶部距离
            fontColor:'#f00',    //文字颜色
            fontSize:'16px',     //文字大小
            fontStyle:'微软雅黑', //字体
            fontWeight:'500',    //加粗
            lineHeight:'16px',   //行高
          }
        ],
        //抽奖按钮图
        imgs:[
            {
              src:require('@/assets/btn_cj.png'),   //图片url
              top:'-130%',     //图片距顶部距离
              width:'100%',  //图片宽
              // height:'100%', //图片高
            }
        ],
      }],
    }
  },
  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>
<style scoped></style>

2、预览

请添加图片描述

四、抽奖

1、src/components/LuckyGrid.vue

<template>
  <div class="lucky_grid">
    <h1>LuckyGrid页面</h1>
    <template>
    <LuckyGrid
      ref="myLucky"
      width="400px"
      height="400px"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :activeStyle="activeStyle"
      :defaultConfig="defaultConfig"
      :defaultStyle="defaultStyle"
      @start="start"
      @end="end"
    />
</template>
</div>
</template>

<script>
export default {
  name: 'LuckyGrid1',
  data () {
    return {
      defaultStyle: {
        background: '#f00',
        borderRadius:'60px',
        shadow: '2px 2px 3px #f00',
        fontColor:'#f00',    //文字颜色
        fontSize:'16px',     //文字大小
        fontStyle:'微软雅黑', //字体
        fontWeight:'500',    //加粗
        lineHeight:'16px',   //行高
        wordWrap:true,       //换行
        lineClamp:2,         //2行，剩下的...
        lengthLimit:'90%',
      },
      defaultConfig:{
        gutter:'12px',
        speed:10,
        accelerationTime:1500,
        decelerationTime:1500,
      },
      activeStyle:{
        fontColor:'#f00',    //文字颜色
        fontSize:'16px',     //文字大小
        fontStyle:'微软雅黑', //字体
        fontWeight:'500',    //加粗
        background:'#FFF402',       //换行
        shadow: '2px 2px 3px #f00',
      },
      blocks: [
        { 
          padding: '40px',     //可旋转区域与转盘边缘的距离
          background: '#f00',  //转盘背景色
          borderRadius: '80px',
          //转盘背景图
          imgs:[
            {
              src:require('@/assets/LuckyGrid.png'),   //图片url
              top:'0',     //图片距顶部距离
              width:'400px',  //图片宽
              height:'400px', //图片高
            }
          ],
        }
      ],
      prizes: [
        { 
          x: 0, 
          y: 0, 
          //奖品文字
          fonts: [
            { 
              text: '苹果',        //文字
              top: '10%',          //文字距顶部距离
              fontColor:'#f00',    //文字颜色
              fontSize:'16px',     //文字大小
              fontStyle:'微软雅黑', //字体
              fontWeight:'500',    //加粗
              lineHeight:'16px',   //行高
              wordWrap:true,       //换行
              lineClamp:2,         //2行，剩下的...
            }
          ], 
          //奖品图
          imgs:[
            {
              src:'https://img95.699pic.com/xsj/1s/5e/0g.jpg%21/fh/300',   //图片url
              top:'30%',     //图片距顶部距离
              width:'60px',  //图片宽
              height:'60px', //图片高
            }
          ],
          background: '#eee',  //扇形背景色
          range:10,  //当前prize.range/所有prize中range总和
          borderRadius: '10px',
          shadow: '2px 2px 3px #f00',
        },
        { x: 1, y: 0, fonts: [{ text: '1', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 2, y: 0, fonts: [{ text: '2', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 2, y: 1, fonts: [{ text: '3', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 2, y: 2, fonts: [{ text: '4', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 1, y: 2, fonts: [{ text: '5', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 0, y: 2, fonts: [{ text: '6', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 0, y: 1, fonts: [{ text: '7', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
      ],
      buttons: [{
        x: 1, y: 1,
        borderRadius: '80px',
        background: '#FFF402',
        shadow: '2px 2px 3px #f00',
        fonts: [
          { 
            text: '点击抽奖',        //文字
            top: '40%',          //文字距顶部距离
            fontColor:'#f00',    //文字颜色
            fontSize:'16px',     //文字大小
            fontStyle:'微软雅黑', //字体
            fontWeight:'500',    //加粗
            lineHeight:'16px',   //行高
          }
        ],
        // 抽奖按钮图
        imgs:[
            {
              src:require('@/assets/btn_grid.png'),   //图片url
              top:'15%',     //图片距顶部距离
              width:'70%',  //图片宽
              height:'70%', //图片高
              borderRadius: '80px',
            }
        ],
      }],
    }
  },
  methods: {
    start () {
      // 开始游戏
      this.$refs.myLucky.play()
      // 使用定时器模拟接口
      setTimeout(() => {
        // 结束游戏, 并抽第0号奖品
        this.$refs.myLucky.stop(0)
      }, 3000)
    },
    end(prize){ // 游戏结束触发 end 回调
      alert('恭喜中奖: ' + prize.fonts[0].text);
    }
  }
}
</script>
<style scoped></style>

2、预览
请添加图片描述

五、老虎机

1、src/components/SlotMachine.vue

<template>
  <div class="slot_machine">
    <h1>SlotMachine页面</h1>
    <template>
    <SlotMachine
      ref="myLucky"
      width="400px"
      height="300px"
      :blocks="blocks"
      :prizes="prizes"
      :slots="slots"
      :defaultConfig="defaultConfig"
    />
    <div class="start_slot_machine" @click="start">
      <div class="slot_machine_btn" @click="start">启动</div>
    </div>
</template>
</div>
</template>

<script>
export default {
  name: 'SlotMachine1',
  data () {
    return {
      blocks: [
        { 
          padding: '10px', background: '#617df2',
          imgs:[
            {
              src:require('@/assets/SlotMachine .png'),   //图片url
              top:'0',     //图片距顶部距离
              width:'400px',  //图片宽
              height:'300px', //图片高
            }
          ],
        },
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#afc8ff' },
        { padding: '10px', background: '#e9e8fe' },
      ],
      slots: [
        { speed: 30 },
        { speed: 15 },
        { speed: 20 },
      ],
      prizes: [
        {
          fonts: [
            { 
              text: '苹果',        //文字
              top: '15%',          //文字距顶部距离
              fontColor:'#900',    //文字颜色
              fontSize:'16px',     //文字大小
              fontStyle:'微软雅黑', //字体
              fontWeight:'500',    //加粗
              lineHeight:'16px',   //行高
              wordWrap:true,       //换行
              lineClamp:2,         //2行，剩下的...
            }
          ], 
          background: '#bac5ee',
          borderRadius: '10px',
          padding: '10px',
          imgs: [
            {
              top:'10%',
              width: '80%',
              height: '80%',
              src: require('@/assets/face_1.png')
            },
            // {
            //   top:'10%',
            //   width: '80%',
            //   height: '80%',
            //   src: require('@/assets/face_1a.png')
            // }
          ]
        },
        {
          background: '#bac5ee',
          borderRadius: '10px',
          padding: '10px',
          imgs: [
            {
              top:'10%',
              width: '80%',
              height: '80%',
              src: require('@/assets/face_2.png')
            },
            // {
            //   top:'10%',
            //   width: '80%',
            //   height: '80%',
            //   src: require('@/assets/face_2a.png')
            // }
          ]
        },
        {
         
          background: '#bac5ee',
          borderRadius: '10px',
          padding: '10px',
          imgs: [
            {
              top:'10%',
              width: '80%',
              height: '80%',
              src: require('@/assets/face_3.png')
            },
          ]
        }
      ],
      defaultConfig: {
        rowSpacing: '20px',
        colSpacing: '20px',
      }
    }
  },
  methods: {
    start () {
      // 开始游戏
      this.$refs.myLucky.play()
      // 使用定时器模拟接口
      setTimeout(() => {
      // 假设 4 种结果
      const res = [
        [0, 1, 2],
        [1, 2, 1],
        [1, 2, 2],
        [2, 2, 2]
      ]
      // 随机取一组数据
      const index = res[Math.random() * 4 >> 0]
        // 调用 stop 方法停止游戏
        this.$refs.myLucky.stop(index)
      }, 500);
    },
    end(prize){ // 游戏结束触发 end 回调
      alert('恭喜中奖: ' + prize.fonts[0].text);
      requestServices.queryCoursewareSource({ lessonNumberId: this.lessonInfo.id }).then((res) => {
        if(res&&res.success)localStorage.setItem('KJPathData',res.object);
      });
    }
  }
}
</script>
<style scoped>
.start_slot_machine {
  width: 400px;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
}

.slot_machine_btn {
  width: 80px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #eee;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
}
</style>

2、预览
请添加图片描述

六、官网

lucky-canvas官网

总结

踩坑路漫漫长@~@

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

AI大模型探索之路-训练篇8：大语言模型Transformer库-预训练流程编码体验

AI大模型探索之路-训练篇8：大语言模型Transformer库-预训练流程编码体验

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…
阅读更多...
stable diffusion controlnet前处理中的图像resize

stable diffusion controlnet前处理中的图像resize

在SD controlnet应用中&#xff0c;一般都要先安装controlnet_aux&#xff0c;并在项目代码中import相关前处理模块&#xff0c;如下所示。 在对control image进行前处理&#xff08;比如找边缘&#xff0c;人体特征点&#xff09;之前&#xff0c;往往会图像进行resize&#x…
阅读更多...
【论文阅读——基于拍卖的水平联邦学习后付款激励机制设计与声誉和贡献度测量】

【论文阅读——基于拍卖的水平联邦学习后付款激励机制设计与声誉和贡献度测量】

1.原文名称 Auction-Based Ex-Post-Payment Incentive Mechanism Design for Horizontal Federated Learning with Reputation and Contribution Measurement 2.本文的贡献 我们提出了一种贡献度测量方法。我们建立了一个声誉系统。声誉易于下降&#xff0c;难以提高。结合声…
阅读更多...
Redis源码学习记录：列表 (ziplist)

Redis源码学习记录：列表 (ziplist)

ziplist redis 源码版本&#xff1a;6.0.9。ziplist 的代码均在 ziplist.c / ziplist.h 文件中。 定义 ziplist总体布局如下&#xff1a; <zlbytes> <zltail> <zllen> <entry> <entry> ... <entry> <zlend> zlbytes&#xff1a;uin…
阅读更多...
stm32单片机开发一、中断之外部中断实验

stm32单片机开发一、中断之外部中断实验

stm32单片机的外部中断和定时器中断、ADC中断等都由stm32的内核中的NVIC模块控制&#xff0c;stm32的中断有很多中&#xff0c;比如供电不足中断&#xff0c;当供电不足时&#xff0c;会产生的一种中断&#xff0c;这么多中断如果都接在CPU上&#xff0c;或者说CPU去处理&#…
阅读更多...
普乐蛙元宇宙VR体验馆设备集体亮相VR文旅景区展

普乐蛙元宇宙VR体验馆设备集体亮相VR文旅景区展

普乐蛙全国巡展又双叒叕开始了! 这次来到的是“好客山东”↓↓ 山东2024休闲旅游产业展 4月25日至27日&#xff0c;2024休闲旅游产业展在临沂国际博览中心举办。本次展会以“潮购文旅好品&#xff0c;乐享时尚生活”为主题&#xff0c;汇聚全国文旅产业上下游500多家企业、上万…
阅读更多...
基于FCN网络实现的多类别图像分割任务

基于FCN网络实现的多类别图像分割任务

1、前言 FCN 作为图像分割的开山之作&#xff0c;将分割任务作为逐个像素点的分类任务 之前完成了基于unet、resnetunet、deeplab等等网络的分割任务&#xff0c;具体的可以参考本专栏&#xff1a; 图像分割_听风吹等浪起的博客-CSDN博客 因为FCN网络的实现较为复杂&#xf…
阅读更多...
【阿里笔试题汇总】[全网首发] 2024-04-29-阿里国际春招笔试题-三语言题解(CPP/Python/Java)

【阿里笔试题汇总】[全网首发] 2024-04-29-阿里国际春招笔试题-三语言题解(CPP/Python/Java)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新阿里国际近期的春秋招笔试题汇总&#xff5e; &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x…
阅读更多...
访学/博后/联培博士关注|不同国家的英语口音辨识度训练

访学/博后/联培博士关注|不同国家的英语口音辨识度训练

在访问学者、博士后及联合培养的申请过程中&#xff0c;接收方多数都要求英文面试。如果导师的母语为非英语国家&#xff0c;将会带有口音&#xff0c;这样更增加了英语面试难度。如何提升不同国家的英语口音辨识度&#xff0c;使自己的英语表达更加流利&#xff0c;知识人网小…
阅读更多...
01数学建模 -线性规划

01数学建模 -线性规划

1.1线性规划–介绍 翻译翻译什么叫惊喜 1.2线性规划–原理 拉格朗日乘数法手算 最值化 f ( x , y ) , s . t . g ( x , y ) c , 引入参数 λ &#xff0c;有&#xff1a; F ( x , y , λ ) f ( x , y ) λ ( g ( x , y ) − c ) 再将其分别对 x , y , λ 求导&#xff0c…
阅读更多...
第十五届蓝桥杯省赛第二场C/C++B组H题【质数变革】题解

第十五届蓝桥杯省赛第二场C/C++B组H题【质数变革】题解

解题思路 首先&#xff0c;我们考虑一下整个数组都是由质数构成的情况。 当我们要将质数 x x x 向后移 k k k 个时&#xff0c;如果我们可以知道质数 x x x 在质数数组的下标 j j j&#xff0c;那么就可以通过 p r i m e s [ j k ] primes[j k] primes[jk] 来获取向后…
阅读更多...
远程桌面的端口配置与优化

远程桌面的端口配置与优化

在现代企业环境中&#xff0c;远程桌面连接已成为日常工作中不可或缺的一部分。然而&#xff0c;随着网络攻击的增加&#xff0c;确保远程桌面连接的安全性变得尤为重要。其中一个关键的安全因素是端口配置。 一、远程桌面默认端口 远程桌面协议&#xff08;RDP&#xff09;默…
阅读更多...
vue2迁移到vue3，v-model的调整

vue2迁移到vue3，v-model的调整

项目从vue2迁移到vue3&#xff0c;v-model不能再使用了&#xff0c;需要如何调整&#xff1f; 下面只提示变化最小的迁移&#xff0c;不赘述vue2和vue3中的常规写法。 vue2迁移到vue3&#xff0c;往往不想去调整之前的代码&#xff0c;以下就使用改动较小的方案进行调整。 I…
阅读更多...
无人机反制：雷达探测+信号干扰器技术详解

无人机反制：雷达探测+信号干扰器技术详解

固定翼无人机、旋翼无人机等&#xff0c;可折叠式无机、DIY无人机等。黑飞&#xff0c;监管困难给航空业带来了诸多隐患&#xff1b;给恐怖袭击及间谍侦察带来新的方式、引发了各国地区政府的忧虑&#xff0c;在中国存在的问题更加严峻。 反无人飞行器防御系统(AUDS)&#xff0…
阅读更多...
positivessl通配符证书签发13个月仅400元

positivessl通配符证书签发13个月仅400元

PositiveSSL是Sectigo旗下的数字证书品牌&#xff0c;旗下的数字证书产品不仅具有签发速度快、性价比高以及兼容性高等特点&#xff0c;还可以为网站提供传输信息加密服务&#xff0c;保护客户隐私安全&#xff0c;提升客户对网站的信任度。今天就随SSL盾小编了解PositiveSSL旗…
阅读更多...
【好书推荐8】《智能供应链：预测算法理论与实战》

【好书推荐8】《智能供应链：预测算法理论与实战》

【好书推荐8】《智能供应链&#xff1a;预测算法理论与实战》 写在最前面编辑推荐内容简介作者简介目录精彩书摘前言/序言我为什么要写这本书这本书能带给你什么 致谢 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光&#xff0c;感谢你的陪伴…
阅读更多...
C#基础|对象初始化器与构造方法对比总结

C#基础|对象初始化器与构造方法对比总结

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 01 对象初始化器的作用 为了更加灵活的初始化对象的“属性”&#xff0c;是对构造化方法的补充。 02 构造方法总结 2.1、存在的必要性&#xff1a;一个类中&#xff0c;至少要有一个构造方法&#xff08;有无参数均…
阅读更多...
公网ip申请ssl仅260

公网ip申请ssl仅260

现在很多网站都已经绑定域名&#xff0c;因此使用的都是域名SSL证书保护网站传输信息安全&#xff0c;而没有绑定域名只有公网IP地址的网站想要保护传输信息安全就要申请IP SSL证书。IP SSL证书也是由正规CA认证机构颁发的数字证书&#xff0c;用来保护用户的隐私以及数据安全&…
阅读更多...
本地运行测试 YOLOv8（20240423）

本地运行测试 YOLOv8（20240423）

一、环境搭建请参考&#xff1a;Win10 搭建 YOLOv8 运行环境&#xff08;20240423&#xff09;-CSDN博客 二、安装 PyCham 1.1、下载安装 官网地址&#xff1a;Download PyCharm: The Python IDE for data science and web development by JetBrains 阿里云盘&#xff08;社区…
阅读更多...
免费的单片机物联网MQTT平台选择

免费的单片机物联网MQTT平台选择

目的是多设备接入中控&#xff0c;平台只做转发。 选择巴法云&#xff1a;巴法科技&巴法云-巴法设备云-巴法物联网云平台 clientId是私钥uid&#xff1a; 多设备 clientId 填同一个 uid 都是可以的。平台应该是加了后缀区分。 支持自定义topic&#xff0c;操作简单&#x…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站