微信小程序圆盘抽奖（扇形画圆）

前言

提示：这里可以添加本文要记录的大概内容：

例如：领导安排做一个微信小程序的转盘抽奖，要求可以复用，动态的修改抽奖的板块个数，由于是第一次做微信小程序踩了很多的坑，在网上也没有找到同类型的文章，所以在此记录一下。
这两天尝试了各种方法，首先是使用canvas设置路径来绘制扇形直到完成一个圆，但是微信小程序的canvas不兼容使用transform的属性，无法进行旋转，不过原生的可以使用这个思路，这里分享一个使用canvas画分割画圆的文章，作者写得非常好https://blog.csdn.net/qq_44797965/article/details/104330823

提示：以下是本篇文章正文内容，下面案例可供参考

先上效果

正文

先说一下实现的思路，因为需要动态的设置扇形的块数所以这里使用了动态的css来绘制转盘，再加上微信小程序的animation使得转盘转动。
上代码：wxml

<view class="pie" animation="{{animation}}"><view class="slice" wx:for="{{sum}}" wx:key="index" style="{{styless[index]}} "></view>
</view><button type="primary" bindtap="luckDraw" style="margin-bottom:10px;">点击抽奖
</button>

/*** 页面的初始数据*/Page({data: {degNumber:0,animation:'',sum:10styless:[],contents:'',},recove:function(){this.animation2.rotate(0).step()this.setData({animation:this.animation2.export(),})},onReady: function () {/*获取随机颜色*/var degs=360/this.data.sum;var degsY=(90-degs)*-1;let styless=this.data.styless;//在这里根据需要绘制的扇形数量来对偏移的角度进行计算//这里的skewY设置为0是一个圆的1/4，内角是一个90°的直角for(var i=0;i<this.data.sum;i++){styless.push( 'transform:rotate('+degs*i+'deg) skewY('+degsY+'deg);background-color:'+this.getColor())//把结果结合到样式里再放到数组中，}this.setData({styless:styless})//使用数组把样式内容存起来this.animation=wx.createAnimation(duration:4000,{//设置动画时间为4秒timingFunction:'ease-in-out',delay: 10,})this.animation2=wx.createAnimation({duration:0,//复位用的动画timingFunction:'ease-in-out',delay: 0,})}，//当抽奖按钮按下时候luckDraw:function(){var that=this;var roundNumber= Math.round(3600+Math.random()*1000);//随机转动的角度，这里我先让它转10圈以上console.log(roundNumber);this.setData({degNumber:roundNumber})this.animation.rotate(this.data.degNumber).step()this.setData({animation: this.animation.export(),})setTimeout(() => {//这里通过计时器来进行弹框提示，转动的动画时间为4秒，这里的提示框设置为4.5秒在转动完后弹出提示框提示用户console.log("1"+this.data.ces);wx.showModal({title: '抽奖信息',content: that.data.contents,//提示的信息success: function (res) {if(res.cancel){that.recove();//进行转盘的复位}else{that.recove();//进行转盘的复位}}})}, 4500);}，recove:function(){//让圆盘复位this.animation2.rotate(0).step()this.setData({animation:this.animation2.export(),})},//随机获取一种颜色getColor(){var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);return 'rgb(' + r + ',' + g + ',' + b + ')';},})

wxss:

.pie{//这里画一个圆position: relative;margin: 1em auto;padding: 0;width: 300px;height: 300px;border-radius: 50%;list-style: none;overflow: hidden;
}
.slice {//这里让所有的扇形块都绝对定位overflow: hidden;position: absolute;top: 0;right: 0;width: 50%;height: 50%;transform-origin: 0% 100%;}

这里并没有对抽奖的结果进行判断，因为抽奖的结果是后端接口拿到的，所以这里并没有进行判断，这里提供一下判断的思路，当后端返回了中奖结果后，使转盘转动到随机圈数+对应扇形的角度区间即可。至于抽奖指针，因为下班了就没有做。

总结

微信小程序的东西缺太多了真不好用。