uniApp大转盘插件使用说明

turnWheel.js

var turnWheel = {
        //奖品接口 ，可以通过服务器设置接口
	rewards: [],
	//每个散型的颜色设置
	colors: [
		"#AE3EFF",
		"#4D3FFF",
		"#FC262C",
		"#3A8BFF",
		"#EE7602",
		"#FE339F",
		"#4D3FFF",
		"#FC262C"
	],
	//转盘外圆的半径
	outsideRadius: 160,
	//转盘奖品位置距离圆心的距离 
	textRadius: 200,
	//转盘内圆的半径 
	insideRadius: 68,
	//开始角度 
	startAngle:270/Math.PI,
	//点击旋转状态 false:停止;ture:旋转 
	bRotate: false,
	//每次旋转动画角度 
	rotateAg: 5,
	//每次时间间隔
	rotateLimit: 20,
	//保存的动画timer
	timer: 0,
	//结束的时间
	goTime: 1000,
	//canvas的ctx
	ctx: false,
	//宽度
	width:320,
	//高度
	height:320,
	init: function() {
		 
		this.ctx =  uni.createCanvasContext('wheelCanvas');
		
	},
	draw: function() {
		
	},
	/*
	    index 奖品的索引
	    callback 成功回调
	    doing 进度回调
	*/
	goRoate: function(index, callback,doing) {
		
	}
};
module.exports=turnWheel;

index.vue调用

注意：

1、需要 ready时设置 onLoad 不行

2、先获取奖品数据，再实例化画布

3、大转盘旋转使用的css动画，canvasStyle

<template>
	<view >
		<div class="wheel mgb-10">
		    <canvas :style="canvasStyle" @error="canvasIdErrorCallback" class="wheel-canvas" canvas-id="wheelCanvas" id="wheelCanvas" width="320" height="320"></canvas>
		    <img  @click="goRate()" class="wheel-pointer" src="../../static/wheel-pointer.png" />
		</div> 
		<div style="padding:10px;text-align:center ;">
			<div style="margin-bottom:10px;">得推大转盘</div>
			<a style="color:#323232;text-decoration: none;" target="_blank" href="http://www.deituicms.com">官网：http://www.deituicms.com</a>
		</div>
		<div v-if="showTip" class="tipBox">
			<div class="tipBox-msg">{{msg}}</div>
		</div>
	</view>
</template>

<script>
	import turnWheel from "../../common/turnWheel.js";
	export default {
		data() {
			return {
				title: 'Hello',
				canvasStyle:"",
				msg:"",
				showTip:false
			}
		},
		//这边需要 ready时设置 onLoad 不行
		onReady() {
		        this.getRewards();
		        			
		},
		methods: {
		        getRewards:function(){
		                http.get({
		                    url:"",
		                    success:function(res){
		                        turnWheel.rewards=res.data.list;
		                        turnWheel.init();
        			 
        			                turnWheel.draw();
		                    }
		                })
		             
        			
		        },
			goRate:function(){
				console.log("click")
				var that=this;
				http.get({
		                    url:"",
		                    success:function(res){
		                        var index=res.data.index;
        				turnWheel.goRoate(turnWheel.rewards.length-index,function(){
        					that.showTip=true;
        					that.msg=turnWheel.rewards[index].description;
        					 
        				},function(e){
        					 
        					that.canvasStyle={
        						transform:e
        					};
        				});
        		                    }
        		                })    
				
			},
			canvasIdErrorCallback: function (e) {
			    console.error(e.detail.errMsg)
			}
		}
	}
</script>

<style>
	.wheel {
		display: block;
		width: 320px;
		height: 320px;
		position: relative;
		
		margin: 0 auto;
		margin-top: 30px;
	}
	
	.wheel-pointer {
		position: absolute;
		width: 156px;
		height: 156px;
		left: 80px;
		top: 80px;
		cursor: pointer;
	}
	
	.wheel-canvas {
		width: 320px;
		height: 320px;
	}
	.tipBox{
		position: fixed;
		bottom: 120px;
		width: 200px;
		left: 50%;
		margin-left:-100px ;
		background-color: #4CD964;
	} 
	.tipBox-msg{
		padding: 10px 6px;
		text-align: center;
		color: #fff;
	}
</style>