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

文章目录

      • 官网
        • 使用(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><LuckyWheelwidth='转盘宽度'height='转盘高度'prizes="奖品"blocks="背景":buttons="开始按钮"@start="点击开始按钮触发start"@end="抽奖结束触发end"/>
</template>
配置项-width/height

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

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

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

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

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

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

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

配置项-blocks

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

<template><div class="test"><LuckyWheelref="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"><LuckyWheelref="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"><LuckyWheelref="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"><LuckyWheelref="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(() => {// 假设后端返回的中奖索引是0const index = 0// 调用stop停止旋转并传递中奖索引this.$refs.myLucky.stop(index)}, 3000)},// 抽奖结束会触发end回调endCallback (prize) {console.log(prize)}
},

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

优化

此处还做了一些小优化

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

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

  • [2] 按钮抽离
    于是我先不设置按钮,最后将按钮定位在转盘上
    在这里插入图片描述
案例
<template><div class="test"><LuckyWheelref="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(() => {// 假设后端返回的中奖索引是0const 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.mzph.cn/news/111037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++实现AC自动机,剪枝、双数组压缩字典树!详解双数组前缀树(Double-Array Trie)剪枝字典树(Patricia Trie)

代码在&#xff1a;github.com/becomequantum 最近研究了一下字典树&#xff0c;什么AC自动机&#xff0c;双数组压缩字典树&#xff0c;剪枝字典树都自己写代码实现了一下。这本该是本科学数据结构时该玩明白的东西&#xff0c;我到现在才会玩。本视频主要介绍一下双数组和剪…

python 深度学习 解决遇到的报错问题7

目录 一、ValueError: unsupported pickle protocol: 5 二、报错protobuf 三、AttributeError: The vocab attribute was removed from KeyedVector in Gensim 4.0.0 四、ModuleNotFoundError: No module named cartopy 五、ImportError: cannot import name COMMON_SAFE_A…

【C++】特殊类的设计(只在堆、栈创建对象,单例对象)

&#x1f30f;博客主页&#xff1a; 主页 &#x1f516;系列专栏&#xff1a; C ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ &#x1f60d;期待与大家一起进步&#xff01; 文章目录 一、请设计一个类&#xff0c;只能在堆上创建对象二、 请设计一个类&#xff0c;只能…

竞赛选题 深度学习YOLO安检管制物品识别与检测 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络4 Yolov55 模型训练6 实现效果7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLO安检管制误判识别与检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&…

【C++中cin、cin.get()、cin.getline()、getline() 的区别】

文章目录 引入cin基本用法输入多个变量换行符存放在缓冲区中 cin.get()基本用法重载函数换行符残留在缓冲区中 cin.getline()基本使用重载函数换行符不会残留在缓冲区中 string 流中的 getline()总结用法总结几个输入实例输入格式输入格式输入格式输入格式 输出格式 写在最后 引…

大模型技术实践(五)|支持千亿参数模型训练的分布式并行框架

在上一期的大模型技术实践中&#xff0c;我们介绍了增加式方法、选择式方法和重新参数化式方法三种主流的参数高效微调技术&#xff08;PEFT&#xff09;。微调模型可以让模型更适合于我们当前的下游任务&#xff0c;但当模型过大或数据集规模很大时&#xff0c;单个加速器&…

Hadoop3教程(七):MapReduce概述

文章目录 &#xff08;68&#xff09; MR的概述&优缺点&#xff08;69&#xff09;MR的核心思想MapReduce进程 &#xff08;70&#xff09;官方WC源码&序列化类型&#xff08;71&#xff09;MR的编程规范MapperReducerDriver &#xff08;72&#xff09;WordCount案例需…

OpenCV16-图像连通域分析

OpenCV16-图像连通域分析 1.图像连通域分析2.connectedComponents3.connectedComponentsWithStatus 1.图像连通域分析 连通域是指图像中具有相同像素值并且位置相邻的像素组成的区域。连通域分析是指在图像中寻找彼此互相独立的连通域并将其标记出来。 4邻域与8邻域的概念&am…

梯度下降算法(Gradient Descent)

GD 梯度下降法的含义是通过当前点的梯度&#xff08;偏导数&#xff09;的反方向寻找到新的迭代点&#xff0c;并从当前点移动到新的迭代点继续寻找新的迭代点&#xff0c;直到找到最优解&#xff0c;梯度下降的目的&#xff0c;就是为了最小化损失函数。 1、给定待优化连续可微…

PRCV 2023:语言模型与视觉生态如何协同?合合信息瞄准“多模态”技术

近期&#xff0c;2023年中国模式识别与计算机视觉大会&#xff08;PRCV&#xff09;在厦门成功举行。大会由中国计算机学会&#xff08;CCF&#xff09;、中国自动化学会&#xff08;CAA&#xff09;、中国图象图形学学会&#xff08;CSIG&#xff09;和中国人工智能学会&#…

分享一个比对图片是否一致的小工具(来源: github)

运行效果图: 官网: GitHub - codingfishman/image-diff: 一个方便的图片对比工具一个方便的图片对比工具. Contribute to codingfishman/image-diff development by creating an account on GitHub.https://github.com/codingfishman/image-diff 优缺点: 1.采用比对各色块是…

从一道面试题开始学习C++标准库提供的并发编程工具

一个空列表&#xff0c;用两个函数&#xff08;只可调用一次&#xff09;轮流写入值&#xff08;一个写奇数&#xff0c;一个写偶数&#xff09;&#xff0c; 最终实现列表的值为1-100&#xff0c;有序排列。 简单分析&#xff1a;假设这两个函数分别为A和B&#xff0c;A函数往…

Sqoop技术文档笔记

Sqoop是一个用于在Hadoop和关系型数据库之间传输数据的开源工具。它可以将结构化数据从关系型数据库&#xff08;如MySQL、Oracle、SQL Server等&#xff09;导入到Hadoop的分布式文件系统&#xff08;HDFS&#xff09;或hive中&#xff0c;并且可以将数据从HDFS、hive导出到关…

安装VSCode,提升工作效率!iPad Pro生产力进阶之路

文章目录 前言1. 本地环境配置2. 内网穿透2.1 安装cpolar内网穿透(支持一键自动安装脚本)2.2 创建HTTP隧道 3. 测试远程访问4. 配置固定二级子域名4.1 保留二级子域名4.2 配置二级子域名 5. 测试使用固定二级子域名远程访问6. iPad通过软件远程vscode6.1 创建TCP隧道 7. ipad远…

mac 启动mysql Error: Failure while executing; `/bin/launchctl bootstrap gui/501

Error: Failure while executing; /bin/launchctl bootstrap gui/501 /Users/<myUserName>/Library/LaunchAgents/homebrew.mxcl.mysql8.0.plist exited with 5.homebrew 给的提示看不到具体消息 查看 homebrew.mxcl.mysql8.0.plist文件&#xff0c;能看到具体的启动命令…

Netty使用SslHandler实现加密通信-双向认证篇

“不积跬步&#xff0c;无以至千里。” 说明 其实Netty使用SslHandler实现加密通信单向认证和双向认证在代码上区别不大&#xff0c;下面是双向认证的代码示例 引入依赖 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifac…

webrtc基于DTLS的端口复用技术

DTLS协议: DTLS(Datagram Transport Layer Security)数据包安全传输协议,用于在不可靠的数据包传输协议上(如UDP)提供数据的安全传输。 UDP多路复用: 一个UDP多路复用&#xff0c;被用来处理共享同一个UDP端口的多个并发的UDT连接。类似同一个tcp port上创建多个socket connec…

【复盘】主从延迟以及 Waiting for tablemetadata lock 线上问题

背景 今晚DBA给一个大表添加索引&#xff0c;1000多W&#xff0c;正好风控系统这个时间段有查询这个表的请求&#xff0c;于是就出现了复制延迟。 这是正常下的延迟 可以看出基本都是是100毫秒以下。 Waiting for tablemetadata lock&#xff0c;并且业务跑的SQL出现锁等待…

append_ocr_trainf

read_image (Image, D:/图像文件/字符识别/1-1.bmp) access_channel (Image, Image1, 1) * draw_rectangle2 (3600, Row, Column, Phi, Length1, Length2) gen_rectangle2 (Rectangle, 96.0436, 715.9526, 0.0173917050943654, 110.186941, 18.041084) reduce_domain (Image1, …

多线程处理文件集合,先拆分,在执行

try {File file new File(path);File[] files file.listFiles();log.info("当前共有文件 "files.length"个");List<File> filesList new ArrayList<>(Arrays.asList(files));List<List<File>> dividedLists SplitListUtils.sp…