微信小程序|抽奖大转盘实战
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
在抽奖的应用或小程序中，大多会采用一种常见的大转盘抽奖方式，这种方式能直观展现出这个抽奖活动的形式和内容，且能直接吸引人参与。那么这个功能是如何实现的呢？
效果图：
解决方案
（1）首先要实现这个大转盘的样式设计，通过canvas画布和animation动画来实现。（这两个api的用法小编在前面的实战文章有过讲解，感兴趣可以去看一看。）
wxml代码示例：
<view>
<view>
<view>
<view animation="{{animationData}}" >
<canvas style="width: 300px; height: 300px;" canvas-id="lotteryCanvas"></canvas>
<view>
<view wx:for="{{awardsList}}" wx:key="unique" style="-webkit-transform: rotate({{item.lineTurn}});transform: rotate({{item.lineTurn}})"></view>
</view>
<view>
<view wx:for="{{awardsList}}" wx:key="unique">
<view style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})">{{item.award}}</view>
</view>
</view>
</view>
<view bindtap="getLottery" class="canvas-btn {{btnDisabled}}">抽奖</view>
</view>
</view>
</view>（2）wxss中需要实现的则是几种不同颜色效果以及这个圆盘样式的效果。
这其中需要实现一个圆的效果，和圆上的平分六条分割线的样式。中间的抽奖样式，实际上是由下面一个圆上面一个三角形进行重合来展现的，当然，这里也可以直接换成一张类似抽奖样式的图片更方便。
部分代码示例：
//转盘
.canvas-container{
margin: 0 auto;
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
}
.canvas-content{
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: block;
width: 300px;
height: 300px;
border-radius: inherit;
background-clip: padding-box;
background-color: #ffcb3f;
}
.canvas-element{
position: relative;
z-index: 1;
width: inherit;
height: inherit;
border-radius: 50%;
}
.canvas-list{
position: absolute;
left: 0;
top: 0;
width: inherit;
height: inherit;
z-index: 9999;
}
.canvas-item{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #e4370e;
font-weight: bold;
text-shadow: 0 1px 1px rgba(255,255,255,.6);
}（3）js中需要实现转盘转动的六个分区，需要用Math的相关属性，其用法类似于时钟（小编前面的《动态时钟》的文章中也有相关介绍，可以去了解一下）；然后转盘旋转需要调用wx.createAnimation，设置旋转参数，包括转速和频率等；中奖提示调用wx.showModal，在里面设置中奖内容即可。
// 旋转抽奖
app.runDegs = app.runDegs || 0
console.log('deg', app.runDegs)
app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / 6))
console.log('deg', app.runDegs)
var animationRun = wx.createAnimation({
duration: 4000,
timingFunction: 'ease'
})
that.animationRun = animationRun
animationRun.rotate(app.runDegs).step()
that.setData({
animationData: animationRun.export(),
btnDisabled: 'disabled'
})
// 中奖提示
setTimeout(function() {
wx.showModal({
title: '恭喜',
content: '获得' + (awardsConfig.awards[awardIndex].name),
showCancel: false
})
if (awardsConfig.chance) {
that.setData({
btnDisabled: ''
})
}
}, 4000);
},
onReady: function (e) {
var that = this;
// getAwardsConfig
app.awardsConfig = {
chance: true,
awards:[
{'index': 0, 'name': '1元红包'},
{'index': 1, 'name': '5元话费'},
{'index': 2, 'name': '6元红包'},
{'index': 3, 'name': '8元红包'},
{'index': 4, 'name': '10元话费'},
{'index': 5, 'name': '10元红包'}
]
}
// 绘制转盘
var awardsConfig = app.awardsConfig.awards,
len = awardsConfig.length,
rotateDeg = 360 / len / 2 + 90,
html = [],
turnNum = 1 / len // 文字旋转 turn 值
that.setData({
btnDisabled: app.awardsConfig.chance ? '' : 'disabled'
})
var ctx = wx.createContext()
for (var i = 0; i < len; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(150, 150);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / len * i - rotateDeg) * Math.PI/180);
// 绘制圆弧
ctx.arc(0, 0, 150, 0, 2 * Math.PI / len, false);
// 颜色间隔
if (i % 2 == 0) {
ctx.setFillStyle('rgba(255,184,32,.1)');
}else{
ctx.setFillStyle('rgba(255,203,63,.1)');
}本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-05-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
腾讯云开发者
