旋转完毕 停靠的位置, 根据后台返回的数据字段 判断停留位置
prizes:{
'TT_ONE_HUNDRED_PACKAGE': [(4 * Math.PI) / 3], //
'TT_FIFTY': [(10 * Math.PI) / 6, Math.PI], // 50
'TT_TWENTY_FIVE': [Math.PI / 3],
'TT_HALF_DISCOUNT': [(2 * Math.PI) / 3], //, 半价
'TT_FULL_DISCOUNT': [0],
},
//canvas渲染每一帧效果图
onLoadWheel = (angle)=> {
let canvas = document.getElementById('wheel'); //id选择 元素
let context = canvas.getContext('2d');
//先保存,以便后面重绘前回到现在的状态
context.save();
let width = canvas.width;
let height = canvas.height;
let img = new Image();
img.src = WheelTable; //为旋转的图片
img.onload = function() {
context.translate(width * 0.5, height * 0.5);
// context.rotate((Math.PI / 18) * i);
context.rotate(angle);
context.drawImage(img, -width / 2, -height / 2, width, height);
//画图后需要回到之前save的状态
context.restore();
};
}
//循环调用自身,渲染出动画效果
startDraw = (stopAngle, boool)=> {
let that = this;
let tempSpeed = (stopAngle - currentAngle) / 100;
currentAngle += tempSpeed;
setTimeout(function () {
if ((stopAngle - currentAngle) < 0.01) {
wheelStatus = false;
that.setState({
showModal:boool,
});
} else {
that.onLoadWheel(currentAngle);
that.startDraw(stopAngle, boool);
}
}, 10);
}
//点击开始抽奖活动,判断是否应该继续抽奖
clickStart = ()=> {
//判断是否正在抽奖
if (wheelStatus) {
return;
}
let that = this;
let url = `自己接口信息`;
reqm.requestGetNoAuth(url).then(res=>{
if (res.status === 200) {
currentAngle = 0; //每次旋转初始化
that.props.changeLeftTime(res.data.lotteryNum); //后端返回的剩余抽奖次数字段
that.props.getCoupon(res.data.coupons); //展示中奖信息 (自己写样式及其组件)
let tempResult = res.data.lotteryType; //后端返回的中奖信息字段
let prize = that.state.prizes[tempResult]; //根据后端返回的中奖信息字段随机给到(对应该奖励的圆盘)一个旋转位置
let resultCount = prize.length;
let finalResult = Math.floor(Math.random() * resultCount);
let plusAngle = prize[finalResult];
let stopAngle = 20 * Math.PI + plusAngle;
wheelStatus = true;
that.startDraw(stopAngle);
}
}).catch(err=>{
Alert.show({
content:err
});
});
}