1 <script>
2 var ctx = null;
3 export default {
4 props: {
5 lwidth: {
6 type: Number,
7 default: 100,
8
9 },
10 lheight: {
11 type: Number,
12 default: 100
13 },
14 inLottery: {
15 type: Boolean,
16 default: false
17 },
18
19 parts: {
20 type: Array,
21 default: function() {
22 return [{
23 id: 1,
24 name: '香蕉',
25 img: '',
26 color: "#AABBCC"
27 },
28 {
29 id: 2,
30 name: '苹果',
31 img: '',
32 color: "#FFCCFF"
33 },
34 {
35 id: 3,
36 name: '梨子',
37 img: '',
38 color: "#FFFFFF"
39 },
40 {
41 id: 4,
42 name: '青瓜',
43 img: '',
44 color: "#FFCCFF"
45 },
46 {
47 id: 5,
48 name: '番茄',
49 img: '',
50 color: "#FFFFFF"
51 }
52 ]
53 }
54 }
55 },
56 data() {
57 return {
58 winner:"请抽奖"
59 };
60 },
61 computed: {
62 canvasStyle() {
63 return {
64 width: (this.lwidth) + "px",
65 height: (this.lheight) + "px"
66 };
67 },
68
69 },
70 methods: {
71 initLottery:function(ctx,angleTo){
72
73 const len = this.parts.length; //数组长度
74 if (len == 0) {
75 return;
76 }
77 var center_x = this.lwidth / 2;
78 var center_y = this.lheight / 2;
79 var total = 2 * Math.PI; //总度数为2π
80 var Angle = total / len; //平均值
81 var radius = center_x - 14;
82 center_x = center_x;
83 center_y = center_y;
84 angleTo = angleTo || 0;
85 ctx.clearRect(0,0, this.lwidth, this.lheight);
86 ctx.translate(center_x, center_y);
87 ctx.setFontSize(14);
88 ctx.setLineWidth(14);
89 ctx.save();
90 //旋转画布
91 ctx.rotate(angleTo * Math.PI / 180);
92 //
93 var beginAngle = 2 * Math.PI / 360 * (-90);
94 //先画外圆
95 ctx.setStrokeStyle("#ffaa00");
96 ctx.arc(0, 0, radius + 3, 0, Math.PI * 2);
97 ctx.stroke();
98 //画装饰点
99 for (var i = 0; i < 24; i++) {
100 // 装饰点 圆心 坐标计算
101 ctx.beginPath();
102 var r = radius + 6;
103 var xr = r * Math.cos(beginAngle);
104 var yr = r * Math.sin(beginAngle);
105
106 ctx.fillStyle = "#FFFFFF";
107 ctx.arc(xr, yr, 4, 0, 2 * Math.PI);
108 ctx.fill();
109
110 beginAngle += (2 * Math.PI / 360) * (360 / 24);
111
112 }
113 ctx.setLineWidth(0.1);
114 beginAngle = 2 * Math.PI / 360 * (-90);
115 //绘制填充形状
116 for (var i = 0; i < len; i++) {
117 // console.log("color = "+this.parts.color);
118 // console.log("beginAngle="+beginAngle);
119 ctx.save();
120 ctx.beginPath();
121 ctx.moveTo(0, 0);
122 ctx.setStrokeStyle(this.parts.color);
123 ctx.setFillStyle(this.parts.color);
124
125 ctx.arc(0, 0, radius, beginAngle, beginAngle + Angle, false);
126 //ctx.stroke();
127 ctx.fill();
128 ctx.save();
129 beginAngle = beginAngle + Angle;
130 }
131 beginAngle = 0; //Angle / 2;
132 for (var i = 0; i < len; i++) {
133 var ry = -(center_x / 2) - 25;
134 //绘制旋转文字
135 ctx.rotate((beginAngle + (Angle * 0.5))); //顺时针旋转
136 ctx.setTextAlign("center");
137 ctx.setFillStyle("#AA00CC");
138 ctx.fillText(this.parts.name, 0, ry);
139
140 ctx.restore();
141 beginAngle = beginAngle + Angle;
142 }
143 ctx.save();
144 ctx.beginPath();
145 ctx.arc(0, 0, 8, 0, Math.PI * 2);
146 ctx.setFillStyle("#FFFFFF");
147 ctx.fill();
148 ctx.draw();
149 },
150 playReward:function(){
151 var len = this.parts.length; //数组长度
152 if (len == 0) {
153 return;
154 }
155 var angle = 360/len ;
156 var num =Math.floor(Math.random()*len);
157 //num= num%len;
158 angle = num * angle + angle / 2;
159 angle = angle || 0;
160 angle = 360-angle;
161 angle += 1440;
162 console.log("angle = "+angle +",num = "+num);
163 var that = this;
164 var count = 1;
165 // 基值（减速）
166 var baseStep = 50;
167 // 起始滚动速度
168 var baseSpeed =1;
169 var timer = setInterval(function(){
170 console.log("count = "+count);
171 that.initLottery(that.ctx,count) ;
172 if (count == angle) {
173 clearInterval(timer);
174 that.winner = "当前奖品为："+that.parts[num].name;
175 }
176 count = count + baseStep * (((angle - count) / angle) > baseSpeed ? baseSpeed : ((angle - count) / angle))+0.1;
177 if (angle - count < 0.5) {
178 count = angle;
179 }
180 },25);
181 }
182 },
183 // 组件内么有onReady和onLoad等生命周期
184 mounted: function() {
185 this.ctx = uni.createCanvasContext("canvas");
186 this.initLottery(this.ctx,0);
187 }
188 }
189 </script>
发表于 2020-11-21 23:58:00
