Vue笔记_插件组件_lucky-canvas抽奖转盘

news2024/10/6 2:22:02

文章目录

      • 官网
        • 使用(vue2.x)
          • [1] 下载
          • [2] 引入
          • [3] 使用
            • 配置项-width/height
            • 配置项-blocks
            • 配置项-prizes
            • 配置项-buttons
            • 优化
            • 案例

lucky-canvas 是一个基于 Js + Canvas 的抽奖 web 前端组件，提供 大转盘和 九宫格两种抽奖界面，UI 精美，功能强大且专业可靠，只需要通过简单配置即可实现自由定制，快速完成产品需求。

官网

lucky-canvas官网

lucky-canvas可以在vue、react、微信小程序…中使用，在此以vue2.x作为示例进行说明。

使用(vue2.x)
[1] 下载
npm install @lucky-canvas/vue@latest
[2] 引入
// 完整加载---引入+全局注册
import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)
[3] 使用
<template>
  <LuckyWheel
    width='转盘宽度'
    height='转盘高度'
    prizes="奖品"
    blocks="背景"
    :buttons="开始按钮"
    @start="点击开始按钮触发start"
    @end="抽奖结束触发end"
  />
</template>
配置项-width/height

width: ‘300px’ // 默认300px
height: ‘300px’ // 默认300px

在进行渲染时，为了使页面能够等比放大/缩小，会进行配置将所有单位为px的值转换为rem单位。

但是canvas中值的单位是不进行转换的！

<LuckyWheel
  ref="myLucky"
  width="345px"
  height="345px"
/>
// 无论手机屏幕宽高为多少，转盘都是直径为375px的圆

因此 若是想要转盘随着页面等比缩放 => 在给配置项设置数据时单位需要设置为rem或百分比其他配置项中的设置与此相同！

<LuckyWheel
  ref="myLucky"
  width="9.2rem"
  height="9.2rem"
/>
// 若是手机屏幕宽度为375px则转盘为直径为345px的圆；若是手机屏幕宽度为414px则转盘为直径为380.8px的圆。

注：若是宽高不一致，则直径为min[width, height]。

配置项-blocks

blocks用于背景设置
在这里插入图片描述

<template>
  <div class="test">
    <LuckyWheel
      ref="myLucky"
      class="test-myLucky"
      :width="width"
      :height="width"
      :blocks="blocks"
    />
  </div>
</template>

this.blocks = [{
  padding: '0.46rem',
  imgs:[{
    src:'https://img.iwave.net.cn/jeep/51c95637a377c3a12d09abe8b0f975e6.png',
    width: this.width,
    height: this.width,
    rotate: true
  }] 
}]

在这里插入图片描述

配置项-prizes

在这里插入图片描述

<template>
  <div class="test">
    <LuckyWheel
      ref="myLucky"
      class="test-myLucky"
      :width="width"
      :height="width"
      :blocks="blocks"
      :prizes="prizes"
    />
  </div>
</template>

const prizes = [
  {
    id: 1,
    icon: "https://img.iwave.net.cn/bmw/b365029b17e0e1fc972b52080f58cc80.png",
    title: "iphone15 Pro"
  },
  {
      id: 2,
      icon: "https://img.iwave.net.cn/bmw/bbb9c678305a2f55ce7b285561744596.png",
      title: "普通红包"
  },
  {
      id: 3,
      icon: "https://img.iwave.net.cn/bmw/9b03fe2dcbb6be8c02ac63ff0927c92f.png",
      title: "5元话费券"
  },
  {
      id: 4,
      icon: "https://img.iwave.net.cn/bmw/7cffe2c789279a83ef577283535a2c1b.png",
      title: "每日红包"
  },
  {
      id: 5,
      icon: "https://img.iwave.net.cn/bmw/a3731dd942951974b9be1da171735d82.png",
      title: "幸运红包"
  },
  {
      id: 6,
      icon: "https://img.iwave.net.cn/bmw/dc3c6e7624f6b8291c82a36b552785f6.png",
      title: "10元话费券"
  },
  {
      id: 7,
      icon: "https://img.iwave.net.cn/bmw/a6b978fd0064a45ebcd6b649d49714ea.png",
      title: "惊喜福袋"
  },
  {
      id: 8,
      icon: "https://img.iwave.net.cn/bmw/873a940855c837b4d6622fe8da442b8b.png",
      title: "谢谢参与"
  }
]
this.prizes = prizes.map(item=>({
  fonts: [{text: item.title, top: '10%', fontColor: '#FF7002', fontSize: '0.426rem', fontWeight: 600, wordWrap: false, lineHeight: '0.613rem'}],
  imgs: [{src: item.icon, top: '1.38rem', width: '1.3rem', height: '1.4rem' }]
}))

在这里插入图片描述

配置项-buttons

在这里插入图片描述

<template>
  <div class="test">
    <LuckyWheel
      ref="myLucky"
      class="test-myLucky"
      :width="width"
      :height="width"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
    />
  </div>
</template>

this.buttons = [{
  radius: '32.8%',
  imgs:[{
    src: 'https://img.iwave.net.cn/jeep/8e38bb871f79ef8950da8697603cde94.png',
    top: '-1.7rem',
    width: '3.02rem',
    height: '3.02rem'
  }]
}]

在这里插入图片描述

此时点击 “点击领取” 按钮转盘无任何反应，因为我们还没有设置事件进行抽奖。

<template>
  <div class="test">
    <LuckyWheel
      ref="myLucky"
      class="test-myLucky"
      :width="width"
      :height="width"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    />
  </div>
</template>

methods:{
  startCallback () {
    console.log('#@@@@@')
    // 调用抽奖组件的play方法开始游戏
    this.$refs.myLucky.play()
    // 模拟调用接口异步抽奖
    setTimeout(() => {
      // 假设后端返回的中奖索引是0
      const index = 0
      // 调用stop停止旋转并传递中奖索引
      this.$refs.myLucky.stop(index)
    }, 3000)
  },
  // 抽奖结束会触发end回调
  endCallback (prize) {
    console.log(prize)
  }
},

此时抽奖转盘就大致完成了。

优化

此处还做了一些小优化

  • [1] 在不抽奖时转盘默认是静止不动的，但是我希望在没有抽奖时转盘可以慢慢旋转。
    在这里插入图片描述
    现在可以缓慢转动了，但是出现了一个新的问题----> 整个转盘是一起转动的包括按钮！
    在这里插入图片描述

当旋转岛将近180deg时，按钮倒置，用户体验非常不好

  • [2] 按钮抽离
    于是我先不设置按钮，最后将按钮定位在转盘上
    在这里插入图片描述
案例
<template>
  <div class="test">
    <LuckyWheel
      ref="myLucky"
      class="test-myLucky"
      :width="width"
      :height="width"
      :blocks="blocks"
      :prizes="prizes"
      @end="endCallback"
    />
    <div class="startbtn" @click="startCallback"></div>
  </div>
</template>
<script>
export default{
  created(){
    this.blocks = [{
      padding: '0.46rem',
      imgs:[{
        src:'https://img.iwave.net.cn/jeep/51c95637a377c3a12d09abe8b0f975e6.png',
        width: this.width,
        height: this.width,
        rotate: true
      }] 
    }]
    const prizes = [
      {
        id: 1,
        icon: "https://img.iwave.net.cn/bmw/b365029b17e0e1fc972b52080f58cc80.png",
        title: "iphone15 Pro"
      },
      {
          id: 2,
          icon: "https://img.iwave.net.cn/bmw/bbb9c678305a2f55ce7b285561744596.png",
          title: "普通红包"
      },
      {
          id: 3,
          icon: "https://img.iwave.net.cn/bmw/9b03fe2dcbb6be8c02ac63ff0927c92f.png",
          title: "5元话费券"
      },
      {
          id: 4,
          icon: "https://img.iwave.net.cn/bmw/7cffe2c789279a83ef577283535a2c1b.png",
          title: "每日红包"
      },
      {
          id: 5,
          icon: "https://img.iwave.net.cn/bmw/a3731dd942951974b9be1da171735d82.png",
          title: "幸运红包"
      },
      {
          id: 6,
          icon: "https://img.iwave.net.cn/bmw/dc3c6e7624f6b8291c82a36b552785f6.png",
          title: "10元话费券"
      },
      {
          id: 7,
          icon: "https://img.iwave.net.cn/bmw/a6b978fd0064a45ebcd6b649d49714ea.png",
          title: "惊喜福袋"
      },
      {
          id: 8,
          icon: "https://img.iwave.net.cn/bmw/873a940855c837b4d6622fe8da442b8b.png",
          title: "谢谢参与"
      }
    ]
    this.prizes = prizes.map(item=>({
      fonts: [{text: item.title, top: '0.4rem', fontColor: '#FF7002', fontSize: '0.426rem', fontWeight: 600, wordWrap: false, lineHeight: '0.613rem'}],
      imgs: [{src: item.icon, top: '1.38rem', width: '1.3rem', height: '1.4rem' }]
    }))
  },
methods:{
  startCallback () {
    console.log('#@@@@@')
    // 调用抽奖组件的play方法开始游戏
    this.$refs.myLucky.play()
    // 模拟调用接口异步抽奖
    setTimeout(() => {
      // 假设后端返回的中奖索引是0
      const index = 0
      // 调用stop停止旋转并传递中奖索引
      this.$refs.myLucky.stop(index)
    }, 3000)
  },
  // 抽奖结束会触发end回调
  endCallback (prize) {
    console.log(prize)
  },
},
  computed:{
    width(){
      return '9.2rem'
    }
  }
}
</script>
<style lang="less" scoped>
@keyframes rotato{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.test{
  position: relative;
  &-myLucky{
    margin: auto;
    animation: rotato 20s linear infinite forwards;
  }
  .startbtn{
    position: absolute;
    background: url('https://img.iwave.net.cn/jeep/8e38bb871f79ef8950da8697603cde94.png');
    width: 114px;
    height: 114px;
    background-size: 100%;
    top: 108px;
    left: 130px;
    z-index: 100;
  }
}
</style>

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

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

相关文章

Linux创建与删除用户

Linux创建与删除用户

Linux创建与删除用户 新增用户&#xff1a; adduser 用户名【添加用户】 passwd 用户名【设置用户密码】删除用户&#xff1a; userdel -r 用户名【删除用户】
阅读更多...
C++QT---QT-day2

C++QT---QT-day2

/*使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c; 在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是否…
阅读更多...
THE PLANETS：EARTH vulnhub

THE PLANETS：EARTH vulnhub

信息收集 netdiscover -i eth0 -r 192.168.239.0&#xff0c;扫描存活主机&#xff0c;发现目标主机 对目标主机进行端口扫描&#xff1a;nmap -p- -sV -O -Pn -A 192.168.239.186&#xff0c;发现443端口存在DNS&#xff0c;域名 在本地得/etc/hosts中添加域名信息 浏览…
阅读更多...
地垫/毛绒地毯/地毯GCC认证测试项目介绍

地垫/毛绒地毯/地毯GCC认证测试项目介绍

出口美国地垫GCC清关认证 美国联邦法律规定&#xff0c;地毯和垫子要符合易燃性标准和其它要求&#xff0c; 包括2008年《美国消费品安全改进法》的要求。 在地毯和垫子经过检测或合理检测项目后&#xff0c;作为一般用途的 地毯和垫子的生产商和进口商必须在一般合规证书&…
阅读更多...
在 Python 中如何向列表或数组添加元素

在 Python 中如何向列表或数组添加元素

在这篇文章中&#xff0c;你将了解 Python 中的 .append() 方法。你还会看到 .append() 与其他用于向列表添加元素的方法有什么不同。 让我们开始吧&#xff01; Python 中的列表是什么&#xff1f;给初学者的定义 编程中的数组是一个有序的项目集合&#xff0c;所有的项目都…
阅读更多...
开关电源EMC整改案例-辐射骚扰

开关电源EMC整改案例-辐射骚扰

1. 测试结果 产品 Coconut1首次 EMC 测试时&#xff0c;辐射、静电、浪涌均失败。本篇先讨论辐射超标. 1.1 辐射超标 50MHz 、100MHz 、130MHz 、200MHz &#xff0c;4 个频点明显超标&#xff0c;其中 130MHz 左右最明显&#xff0c; 超出 19dB&#xff1b;后将电路板仅…
阅读更多...
龙芯S-2K2000板卡测试记录，安装loongnix系统已知问题及DPDK

龙芯S-2K2000板卡测试记录，安装loongnix系统已知问题及DPDK

S-2K2000板卡已知问题 安装系统时PMON需要使用acpi传参pmon下USB键盘不支持热插拔pmon下插入部分USB键盘 进pmon特别慢&#xff0c;兼容性问题&#xff0c;后续统一解决不支持emmc&#xff0c;等待更新pmon S-2K2000板卡手动引导USB命令 load (usb0,0)/boot/vmlinuz. initr…
阅读更多...
Julia 笔记：初识julia

Julia 笔记：初识julia

1 变量 Julia 不需要指定变量类型&#xff0c;它可以自动推断等号右侧的对象类型 x 10 # 将 10 赋值给变量 xstr "hello" # 将字符串赋值给变量 site_nameflt 9.5 # 浮点型数据 2 注释 单行注释以 # 开头多行注释用 # 与 # 将注释括起来 3 数组 可以存储一个…
阅读更多...
windows terminal鼠标右键打开

windows terminal鼠标右键打开

如果在官网上下载的是zip文件的 需要在注册表修改鼠标右键才能出来 注册表修改如下&#xff1a; 1.先windowsR&#xff0c;在命令框中输入regedit 打开注册表 2.在路径’计算机\HKEY_CLASSES_ROOT\directory\background\shell’下新建一个wt&#xff0c;wt下新建commond 这里…
阅读更多...
优化Bloom的降采样

优化Bloom的降采样

但是我发现不如提高Skip Iterions的数值&#xff0c;降采样的分辨率降低会产生锯齿
阅读更多...
Scrum敏捷项目管理中，开发人员（Developers）的职责

Scrum敏捷项目管理中，开发人员（Developers）的职责

​在Scrum敏捷开发中&#xff0c;开发人员&#xff08;Developers&#xff09;是Scrum团队中最重要的角色之一&#xff0c;负责产品的开发和交付&#xff0c;其重要性不言而喻。 那开发人员的职责和需要参加的活动是什么呢&#xff1f; Developers核心职责&#xff1a; 承诺…
阅读更多...
MIT6.S081Lab1： Xv6 and Unix utilities

MIT6.S081Lab1： Xv6 and Unix utilities

MIT6.S081 Lab1&#xff1a; Xv6 and Unix utilities 官方文档 一.Boot xv6 如何成功的boot xv6可以看之前的文章MIT6.S081实验环境搭建&#xff0c;只是多一个步骤&#xff0c;在clone的文件夹中执行 git checkout util切换为util分支即可。 二.sleep 在user/sleep.c中编…
阅读更多...
【API篇】五、Flink分流合流API

【API篇】五、Flink分流合流API

文章目录 1、filter算子实现分流2、分流&#xff1a;使用侧输出流3、合流&#xff1a;union4、合流&#xff1a;connect5、connect案例 分流&#xff0c;很形象的一个词&#xff0c;就像一条大河&#xff0c;遇到岸边有分叉的&#xff0c;而形成了主流和测流。对于数据流也一样…
阅读更多...
基于白冠鸡优化的BP神经网络（分类应用） - 附代码

基于白冠鸡优化的BP神经网络（分类应用） - 附代码

基于白冠鸡优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于白冠鸡优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.白冠鸡优化BP神经网络3.1 BP神经网络参数设置3.2 白冠鸡算法应用 4.测试结果&#x…
阅读更多...
小型企业团队的理想项目管理软件解决方案

小型企业团队的理想项目管理软件解决方案

中小型企业对于项目管理软件的需求是什么&#xff1f;中小型企业在选择项目管理软件时有什么特别需要注意的吗&#xff1f;市面上哪些项目管理软件更适合中小型企业团队&#xff1f;本文为您解惑答疑&#xff01; 中小型企业的项目管理需求 在项目管理过程中&#xff0c;每个…
阅读更多...
Godot 官方2D C#重构(1)：雪花碰撞

Godot 官方2D C#重构(1)：雪花碰撞

前言 Godot 官方 教程 Godot 2d 官方案例C#重构 专栏 Godot 2d 重构 github地址 实现效果 难点介绍 Godot GDScript和C# 对应关系大部分靠猜 文件导入 资源地址&#xff1a;默认为res://开头2D贴图导入类型&#xff1a;Texture2D public Texture2D Bullet_Image new Textu…
阅读更多...
【数据结构】排序算法的稳定性分析

【数据结构】排序算法的稳定性分析

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …
阅读更多...
学会Docker之---应用场景和基本操作

学会Docker之---应用场景和基本操作

实体机、VM和容器 实体机&#xff08;Physical Machine&#xff09;是指实际的物理设备&#xff0c;例如我们常见的计算机主机、服务器等。它们是由硬件组成&#xff0c;可以直接运行操作系统和应用程序。 虚拟机&#xff08;Virtual Machine&#xff09;是在一台物理机上通过…
阅读更多...
Spring Boot 3.0 已经就绪，您准备好了么？

Spring Boot 3.0 已经就绪，您准备好了么？

Java 微服务开发框架王者 Spring 2014 年的 4 月&#xff0c;Spring Boot 1.0.0 正式发布。距离 1.0 版本的发布已经过去了 9 年多的时间&#xff0c;如今 Spring Boot 已经被 Java 开发者广泛使用&#xff0c;正如 JRebel 的 2022 年开发者生产力报告中提到的那样&#xff0c…
阅读更多...
apk反编译工具下载

apk反编译工具下载

1、jadx https://github.com/skylot/jadx 2、APK签名 https://developer.android.google.cn/studio/command-line/apksigner?hlzh-cn
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023