nzdrtrt
/
Luck-Draw
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[转盘]实现基本功能

master
chenjingyu 5 years ago
parent
daf362315d
commit
a98fb4ce5d
11 changed files with 839 additions and 175 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 76
      src/app/ui/luck-draw/luck-draw.component.html
  2. 193
      src/app/ui/luck-draw/luck-draw.component.scss
  3. 50
      src/app/ui/luck-draw/luck-draw.component.ts
  4. BIN
      src/assets/images/1.png
  5. BIN
      src/assets/images/2.png
  6. BIN
      src/assets/images/turnplate-bg.png
  7. BIN
      src/assets/images/turnplate-pointer.png
  8. BIN
      src/assets/images/zhuan.gif
  9. 305
      src/assets/js/awardRotate.js
  10. 354
      src/assets/js/zhuanpan.js
  11. 16
      src/index.html

76
src/app/ui/luck-draw/luck-draw.component.html
Unescape View File

@ -1,55 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<body>
<div class="box">
<div class="lottery">
<div class="block">
<div class="content">
<div class="none">未中奖</div>
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-25 08:48:50
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-28 13:48:30
-->
<html>
<meta charset="utf-8"/>
<body>
<div class="mainbox">
<div class="colum">
<div class="centerLeft" >
<div class="tanCenterbtn" >
<span name="zhidui" data-id=`{{chooseid}}`>请选择支队</span>
<span name="aaa" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="chosseZhidui(key)">{{item.name}}</span>
</div>
</div>
<div class="block">
<div class="content">
<div class="none">未中奖</div>
</div>
<div class="colum" style="padding-left: 30%;padding-top: 10%;">
<!-- <div class="turntable-wrap">
<div class="light" id="turntable_light"></div>
<div class="turntable" id="turntable">
<ul class="bg" id="turntable_bg"></ul>
<ul class="gift" id="turntable_gift"></ul>
</div>
<div class="block">
<div class="content">
<div class="text">
<p>二等奖</p>
<p>罗技鼠标</p>
</div>
<div class="pointer disabled" id="turntable_pointer">点击抽奖</div>
</div> -->
<div class="banner" name="banner" id="zhuanpan">
<div class="turnplate" style="background-image:url(../../../assets/images/turnplate-bg.png);background-size:100% 100%;">
<canvas class="item" id="wheelcanvas" width="422px" height="422px" ></canvas>
<img class="pointer" src="../../../assets/images/turnplate-pointer.png" />
</div>
</div>
<div class="block">
<div class="content">
<div class="none">未中奖</div>
</div>
</div>
<div class="block">
<div class="content">
<div class="text">
<p>三等奖</p>
<p>一包糖果</p>
</div>
</div>
</div>
<div class="block">
<div class="content">
<div class="none">未中奖</div>
</div>
</div>
<div class="colum" style="display: none;margin-top: 20%;" id="end">
<span id="jieguo" ></span>
</div>
<div class="btn">抽 奖</div>
<div class="str"></div>
</div>
</body>
</body>
</html>

193
src/app/ui/luck-draw/luck-draw.component.scss
Unescape View File

@ -1,126 +1,81 @@
* {
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft YaHei",微软雅黑;
}
.box {
width: 600px;
height: 600px;
background-color: #DEA681;
border-radius: 50%;
margin: 30px auto;
padding: 20px;
position: relative;
overflow: hidden;
}
.lottery {
width: 600px;
height: 600px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
html, body {
height: 100%;
}
.mainbox {
width: 95%;
height: 95%;
padding: 0.125rem 0.125rem 0;
display: flex;
}
.centerLeft{
float: left;
height: 100%;
width: 100%;
position: relative;
background-color: #330000;
box-shadow: 0 0 15px #000;
}
.block {
box-shadow: 0 0 1px #000 inset;
position: absolute;
flex-direction: column;
flex: 2%;
display: flex;
align-items:center;
box-sizing: border-box;
margin: 0 0;
.tanCenterbtn{
width: 100%;
height: 100%;
border: 1px solid #30bbec;
display: flex;
flex-direction: column;
user-select: none;
background-size:100% 100%;
span{
width: 300px;
height: 300px;
transform-origin: right bottom 0;
-webkit-transform-origin: right bottom 0;
}
.block:nth-child(odd) {
background-color: #F1AAA6;
}
.block:nth-child(even) {
background-color: #FD5B78;
}
.block:nth-child(1) {
transform: rotate(0deg) skewY(45deg);
}
.block:nth-child(2) {
transform: rotate(45deg) skewY(45deg);
}
.block:nth-child(3) {
transform: rotate(90deg) skewY(45deg);
}
.block:nth-child(4) {
transform: rotate(135deg) skewY(45deg);
}
.block:nth-child(5) {
transform: rotate(180deg) skewY(45deg);
}
.block:nth-child(6) {
transform: rotate(225deg) skewY(45deg);
}
.block:nth-child(7) {
transform: rotate(270deg) skewY(45deg);
}
.block:nth-child(8) {
transform: rotate(315deg) skewY(45deg);
}
.content {
width: 200px;
height: 230px;
transform-origin: center center 0;
transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);
-webkit-transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);
position: absolute;
right: 0;
bottom: 0;
cursor:pointer;
border-bottom:1px solid #30bbec;
padding: 8px ;
text-align: center;
font-size: 24px;
}
.content .img {
width: 100px;
height: 100px;
margin: 0 auto;
}
.content .text {
width: 100px;
height: 50px;
font-size: 20px;
line-height: 32px;
margin: 0 auto;
}
.content .none {
width: 34px;
height: 200px;
margin: 0 auto;
.colum{
height: 100%;
//width: 100%;
display:table-cell;
vertical-align:middle;
text-align: center;
font-size: 34px;
line-height: 200%;
font-weight: bold;
}
.content img {
width: 80px;
height: 100px;
}
.btn {
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
background-color: #9966CC;
position: absolute;
font-size: 28px;
top: 270px;
left: 270px;
cursor: pointer;
box-shadow: 0 0 14px #000 inset;
color: #FFF;
}
.str {
height: 0px;
width: 0px;
position: absolute;
top: 10px;
left: 300px;
border-top: 60px solid #9966CC;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
span{
font-size: 24px;
//padding-top: 50%;
}
}
//选择后加背景色
.beijicolor{
background-color: #F7BA2A ;
}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{color:#333; font-size:12px;font-family:"Microsoft YaHei"}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
input{ font-size:12px;}
a{ text-decoration:none; color:#000;}
a:hover{color:#c00; text-decoration:none;}
.clear{clear:both;}
/* 大转盘样式 */
.banner{max-height: 650px;
display: block;
width: 95%;
max-width: 650px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.banner .turnplate{display:block;width:100%;position:relative;}
.banner .turnplate canvas.item{width:100%;}
.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;}

50
src/app/ui/luck-draw/luck-draw.component.ts
Unescape View File

@ -1,5 +1,15 @@
/*
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-25 08:48:50
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-27 14:58:42
*/
import { Component, OnInit } from '@angular/core';
declare var KinerLottery:any
//import * from '../../../assets/js/awardRotate'
declare var zhuan:any
@Component({
selector: 'app-luck-draw',
templateUrl: './luck-draw.component.html',
@ -9,11 +19,45 @@ export class LuckDrawComponent implements OnInit {
constructor() { }
ngOnInit(): void {
ngOnInit(){
window.setTimeout(()=>{
//zhuan.drawRouletteWheel()
},0)
}
//支队数据和是否抽奖
choujiang=[
{name:"钦州支队",idnum:1},
{name:"南宁支队",idnum:2},
{name:"柳州支队",idnum:3},
{name:"河池支队",idnum:4},
{name:"来宾支队",idnum:5},
{name:"贺州支队",idnum:6},
{name:"防城港支队",idnum:7},
{name:"崇左支队",idnum:8},
{name:"贵港支队",idnum:9},
{name:"梧州支队",idnum:10},
{name:"百色支队",idnum:11},
{name:"玉林支队",idnum:12},
{name:"北海支队",idnum:13},
{name:"桂林支队",idnum:14}
]
//选中支队
chooseid=-1
chosseZhidui(key){
this.chooseid=key
}
turnplate={
restaraunts:[], //大转盘奖品名称
colors:[], //大转盘奖品区块对应背景颜色
outsideRadius:192, //大转盘外圆的半径
textRadius:155, //大转盘奖品位置距离圆心的距离
insideRadius:68, //大转盘内圆的半径
startAngle:0, //开始角度
bRotate:false //false:停止;ture:旋转
};
}

BIN
src/assets/images/1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 498 B

BIN
src/assets/images/2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 754 B

BIN
src/assets/images/turnplate-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
src/assets/images/turnplate-pointer.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
src/assets/images/zhuan.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

305
src/assets/js/awardRotate.js
Unescape View File

@ -0,0 +1,305 @@
(function($) {
var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
// Bad eval to preven google closure to remove it from code o_O
// After compresion replace it back to var IE = 'v' == '\v'
var IE = eval('"v"=="\v"');
jQuery.fn.extend({
rotate:function(parameters)
{
if (this.length===0||typeof parameters=="undefined") return;
if (typeof parameters=="number") parameters={angle:parameters};
var returned=[];
for (var i=0,i0=this.length;i<i0;i++)
{
var element=this.get(i);
if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {
var paramClone = $.extend(true, {}, parameters);
var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;
returned.push($(newRotObject));
}
else {
element.Wilq32.PhotoEffect._handleRotation(parameters);
}
}
return returned;
},
getRotateAngle: function(){
var ret = [];
for (var i=0,i0=this.length;i<i0;i++)
{
var element=this.get(i);
if (element.Wilq32 && element.Wilq32.PhotoEffect) {
ret[i] = element.Wilq32.PhotoEffect._angle;
}
}
return ret;
},
stopRotate: function(){
for (var i=0,i0=this.length;i<i0;i++)
{
var element=this.get(i);
if (element.Wilq32 && element.Wilq32.PhotoEffect) {
clearTimeout(element.Wilq32.PhotoEffect._timer);
}
}
}
});
// Library agnostic interface
Wilq32=window.Wilq32||{};
Wilq32.PhotoEffect=(function(){
if (supportedCSS) {
return function(img,parameters){
img.Wilq32 = {
PhotoEffect: this
};
this._img = this._rootObj = this._eventObj = img;
this._handleRotation(parameters);
}
} else {
return function(img,parameters) {
// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
this._img = img;
this._rootObj=document.createElement('span');
this._rootObj.style.display="inline-block";
this._rootObj.Wilq32 =
{
PhotoEffect: this
};
img.parentNode.insertBefore(this._rootObj,img);
if (img.complete) {
this._Loader(parameters);
} else {
var self=this;
// TODO: Remove jQuery dependency
jQuery(this._img).bind("load", function()
{
self._Loader(parameters);
});
}
}
}
})();
Wilq32.PhotoEffect.prototype={
_setupParameters : function (parameters){
this._parameters = this._parameters || {};
if (typeof this._angle !== "number") this._angle = 0 ;
if (typeof parameters.angle==="number") this._angle = parameters.angle;
this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle);
this._parameters.step = parameters.step || this._parameters.step || null;
this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
this._parameters.callback = parameters.callback || this._parameters.callback || function(){};
if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind);
},
_handleRotation : function(parameters){
this._setupParameters(parameters);
if (this._angle==this._parameters.animateTo) {
this._rotate(this._angle);
}
else {
this._animateStart();
}
},
_BindEvents:function(events){
if (events && this._eventObj)
{
// Unbinding previous Events
if (this._parameters.bind){
var oldEvents = this._parameters.bind;
for (var a in oldEvents) if (oldEvents.hasOwnProperty(a))
// TODO: Remove jQuery dependency
jQuery(this._eventObj).unbind(a,oldEvents[a]);
}
this._parameters.bind = events;
for (var a in events) if (events.hasOwnProperty(a))
// TODO: Remove jQuery dependency
jQuery(this._eventObj).bind(a,events[a]);
}
},
_Loader:(function()
{
if (IE)
return function(parameters)
{
var width=this._img.width;
var height=this._img.height;
this._img.parentNode.removeChild(this._img);
this._vimage = this.createVMLNode('image');
this._vimage.src=this._img.src;
this._vimage.style.height=height+"px";
this._vimage.style.width=width+"px";
this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
this._vimage.style.top = "0px";
this._vimage.style.left = "0px";
/* Group minifying a small 1px precision problem when rotating object */
this._container = this.createVMLNode('group');
this._container.style.width=width;
this._container.style.height=height;
this._container.style.position="absolute";
this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
this._container.appendChild(this._vimage);
this._rootObj.appendChild(this._container);
this._rootObj.style.position="relative"; // FIXES IE PROBLEM
this._rootObj.style.width=width+"px";
this._rootObj.style.height=height+"px";
this._rootObj.setAttribute('id',this._img.getAttribute('id'));
this._rootObj.className=this._img.className;
this._eventObj = this._rootObj;
this._handleRotation(parameters);
}
else
return function (parameters)
{
this._rootObj.setAttribute('id',this._img.getAttribute('id'));
this._rootObj.className=this._img.className;
this._width=this._img.width;
this._height=this._img.height;
this._widthHalf=this._width/2; // used for optimisation
this._heightHalf=this._height/2;// used for optimisation
var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width));
this._widthAdd = _widthMax - this._width;
this._heightAdd = _widthMax - this._height; // widthMax because maxWidth=maxHeight
this._widthAddHalf=this._widthAdd/2; // used for optimisation
this._heightAddHalf=this._heightAdd/2;// used for optimisation
this._img.parentNode.removeChild(this._img);
this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width;
this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height;
this._canvas=document.createElement('canvas');
this._canvas.setAttribute('width',this._width);
this._canvas.style.position="relative";
this._canvas.style.left = -this._widthAddHalf + "px";
this._canvas.style.top = -this._heightAddHalf + "px";
this._canvas.Wilq32 = this._rootObj.Wilq32;
this._rootObj.appendChild(this._canvas);
this._rootObj.style.width=this._width+"px";
this._rootObj.style.height=this._height+"px";
this._eventObj = this._canvas;
this._cnv=this._canvas.getContext('2d');
this._handleRotation(parameters);
}
})(),
_animateStart:function()
{
if (this._timer) {
clearTimeout(this._timer);
}
this._animateStartTime = +new Date;
this._animateStartAngle = this._angle;
this._animate();
},
_animate:function()
{
var actualTime = +new Date;
var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;
// TODO: Bug for animatedGif for static rotation ? (to test)
if (checkEnd && !this._parameters.animatedGif)
{
clearTimeout(this._timer);
}
else
{
if (this._canvas||this._vimage||this._img) {
var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
this._rotate((~~(angle*10))/10);
}
if (this._parameters.step) {
this._parameters.step(this._angle);
}
var self = this;
this._timer = setTimeout(function()
{
self._animate.call(self);
}, 10);
}
// To fix Bug that prevents using recursive function in callback I moved this function to back
if (this._parameters.callback && checkEnd){
this._angle = this._parameters.animateTo;
this._rotate(this._angle);
this._parameters.callback.call(this._rootObj);
}
},
_rotate : (function()
{
var rad = Math.PI/180;
if (IE)
return function(angle)
{
this._angle = angle;
this._container.style.rotation=(angle%360)+"deg";
}
else if (supportedCSS)
return function(angle){
this._angle = angle;
this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
}
else
return function(angle)
{
this._angle = angle;
angle=(angle%360)* rad;
// clear canvas
this._canvas.width = this._width+this._widthAdd;
this._canvas.height = this._height+this._heightAdd;
// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
this._cnv.translate(this._widthAddHalf,this._heightAddHalf); // at least center image on screen
this._cnv.translate(this._widthHalf,this._heightHalf); // we move image back to its orginal
this._cnv.rotate(angle); // rotate image
this._cnv.translate(-this._widthHalf,-this._heightHalf); // move image to its center, so we can rotate around its center
this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)
this._cnv.drawImage(this._img, 0, 0); // First - we draw image
}
})()
}
if (IE)
{
Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
try {
!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
return function (tagName) {
return document.createElement('<rvml:' + tagName + ' class="rvml">');
};
} catch (e) {
return function (tagName) {
return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
};
}
})();
}
})(jQuery);

354
src/assets/js/zhuanpan.js
Unescape View File

@ -0,0 +1,354 @@
var turnplate={
restaraunts:[], //大转盘奖品名称
colors:[], //大转盘奖品区块对应背景颜色
outsideRadius:192, //大转盘外圆的半径
textRadius:155, //大转盘奖品位置距离圆心的距离
insideRadius:68, //大转盘内圆的半径
startAngle:0, //开始角度
bRotate:false //false:停止;ture:旋转
};
choujiang=[
{name:"钦州支队",idnum:1,result:""},
{name:"南宁支队",idnum:1,result:""},
{name:"柳州支队",idnum:1,result:""},
{name:"河池支队",idnum:1,result:""},
{name:"来宾支队",idnum:1,result:""},
{name:"贺州支队",idnum:1,result:""},
{name:"防城港支队",idnum:1,result:""},
{name:"崇左支队",idnum:1,result:""},
{name:"贵港支队",idnum:9,result:""},
{name:"梧州支队",idnum:10,result:""},
{name:"百色支队",idnum:11,result:""},
{name:"玉林支队",idnum:12,result:""},
{name:"北海支队",idnum:13,result:""},
{name:"桂林支队",idnum:14,result:""}
]
$(document).ready(function(){
//var chooseid = $( "span[name='zhidui']").attr('id');
$("span[name='aaa']").on("click",function(){
console.log($(this).html())
if($(this).html()=="钦州支队"){
turnplate.restaraunts = ["广西东油沥青有限公司", "钦州吾悦广场", "钦州天亿石化有限公司"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6"];
console.log(choujiang[0].result)
if(choujiang[0].idnum<=2)
{
$("#zhuanpan").show()
$("#end").hide();
console.log(choujiang[0].idnum)
choujiang[0].idnum++
choujiang[0].result='钦州吾悦广场'
$("#jieguo").empty()
}else{
$("#zhuanpan").hide()
$("#end").show();
console.log(choujiang[0].idnum)
$("#jieguo").empty()
$("#jieguo").append("您的抽签结果为：</br>"+choujiang[0].result)
}
drawRouletteWheel()
}else if($(this).html()=="南宁支队")
{
turnplate.restaraunts = ["九洲国际（超高层）", "南宁国际会展中心", "维景国际酒店", "荔园山庄 "];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
if(choujiang[1].idnum<=2)
{
$("#zhuanpan").show()
$("#end").hide();
choujiang[1].idnum++
choujiang[1].result='九洲国际（超高层）'
$("#jieguo").empty()
}else{
$("#zhuanpan").hide()
$("#end").show();
$("#jieguo").empty()
$("#jieguo").append("您的抽签结果为：</br>"+choujiang[1].result)
}
drawRouletteWheel()
}else if($(this).html()=="柳州支队")
{
turnplate.restaraunts = ["广西柳州莲花山庄", "柳州万达广场", "龙城地下商业街", "板栗园加气站 ","地王财富中心"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="河池支队")
{
turnplate.restaraunts = ["河池市中石化金城江油库", "河池市宜州区地下商业街", "南城百货（地下） ","宁铁燃气有限责任公司","广西河池市大洋购物中心"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="来宾支队")
{
turnplate.restaraunts = ["来宾饭店（高层）", "宝晨化工", "天成百货（地下） ","百悦商业广场(地下）","来宾市方盛广场（人员密集）"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="贺州支队")
{
turnplate.restaraunts = ["贺州市国际酒店（高层）", "宝晨化工有限公司", "贺州市南宁百货大楼", "远东国贸地下停车场 "];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}
else if($(this).html()=="防城港支队")
{
turnplate.restaraunts = ["防城港供电局", "北京华联超市桂海东盟店", "港宸国际大酒店（高层）", "永旺天和商贸有限公司(只做地下一） ", "广西中油能源有限公司 ","中海油广西防城港天然气有限责任公司 "];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="崇左支队")
{
turnplate.restaraunts = ["崇左油库","崇左市雅图影视广场（6层商场）"];
turnplate.colors = ["#FFF4D6", "#FFFFFF"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="贵港支队")
{
turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "维多利亚酒店（高层）","平南中心购物广场（地下）"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="梧州支队")
{
turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "梧州市中石化火山油库","平南中心购物广场（地下）", ];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="百色支队")
{
turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） "];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="玉林支队")
{
turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","玉林市中医医院"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="北海支队")
{
turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","和安宁春城（大型城市综合体）"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}else if($(this).html()=="桂林支队")
{
turnplate.restaraunts = ["兴安油库", "宏谋酒店（高层）"];
turnplate.colors = ["#FFF4D6", "#FFFFFF"];
$("#zhuanpan").show()
$("#end").hide();
$("#jieguo").empty()
drawRouletteWheel()
}
});
console.log(turnplate.restaraunts)
//动态添加大转盘的奖品与奖品区域背景颜色
/* turnplate.restaraunts = ["广西东油沥青有限公司", "钦州天亿石化有限公司", "九洲国际（超高层）", "南宁国际会展中心 ", "维景国际酒店", "荔园山庄"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"]; */
/* turnplate.restaraunts = ["白云边", "关公坊", "黄鹤楼", "国宝 ", "陈克明", "金沙河", "雪花", "康师傅", "脉动","奥星","金龙鱼","中昌"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; */
var rotateTimeOut = function (){
$('#wheelcanvas').rotate({
angle:0,
animateTo:2160,
duration:8000,
callback:function (){
alert('网络超时，请检查您的网络设置！');
}
});
};
//旋转转盘 item:奖品位置; txt：提示语;
var rotateFn = function (item, txt){
var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
if(angles<270){
angles = 270 - angles;
}else{
angles = 360 - angles + 270;
}
$('#wheelcanvas').stopRotate();
$('#wheelcanvas').rotate({
angle:0,
animateTo:angles+1800,
duration:8000,
callback:function (){
console.log(turnplate.restaraunts.length)
$("#zhuanpan").hide()
$("#end").show();
var dataLength=turnplate.restaraunts.length
if(dataLength>=5)
{
$("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[4])
}else if(dataLength==3){
$("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[1])
}
else{
$("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[0])
}
turnplate.bRotate = !turnplate.bRotate;
}
});
};
$('.pointer').click(function (){
if(turnplate.bRotate)return;
turnplate.bRotate = !turnplate.bRotate;
//获取随机数(奖品个数范围内)
var item = rnd(1,turnplate.restaraunts.length);
console.log(item)
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
rotateFn(item, turnplate.restaraunts[item-1]);
/* switch (item) {
case 1:
rotateFn(252, turnplate.restaraunts[0]);
break;
case 2:
rotateFn(216, turnplate.restaraunts[1]);
break;
case 3:
rotateFn(180, turnplate.restaraunts[2]);
break;
case 4:
rotateFn(144, turnplate.restaraunts[3]);
break;
case 5:
rotateFn(108, turnplate.restaraunts[4]);
break;
case 6:
rotateFn(72, turnplate.restaraunts[5]);
break;
case 7:
rotateFn(36, turnplate.restaraunts[6]);
break;
case 8:
rotateFn(360, turnplate.restaraunts[7]);
break;
case 9:
rotateFn(324, turnplate.restaraunts[8]);
break;
case 10:
rotateFn(288, turnplate.restaraunts[9]);
break;
} */
console.log(item);
});
});
//控制中奖结果
function rnd(n, m){
var random = 5;
//var random = Math.floor(Math.random()*(m-n+1)+n);
return random;
}
//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
drawRouletteWheel();
};
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
//根据奖品个数计算圆周角度
var arc = Math.PI / (turnplate.restaraunts.length/2);
var ctx = canvas.getContext("2d");
//在给定矩形内清空一个矩形
ctx.clearRect(0,0,422,422);
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.strokeStyle = "#FFBE04";
//font 属性设置或返回画布上文本内容的当前字体属性
ctx.font = '16px Microsoft YaHei';
for(var i = 0; i < turnplate.restaraunts.length; i++) {
var angle = turnplate.startAngle + i * arc;
ctx.fillStyle = turnplate.colors[i];
ctx.beginPath();
//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
//锁画布(为了保存之前的画布状态)
ctx.save();
//----绘制奖品开始----
ctx.fillStyle = "#E5302F";
var text = turnplate.restaraunts[i];
var line_height = 17;
//translate方法重新映射画布上的 (0,0) 位置
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
//rotate方法旋转当前的绘图
ctx.rotate(angle + arc / 2 + Math.PI / 2);
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
if(text.indexOf("M")>0){//流量包
var texts = text.split("M");
for(var j = 0; j<texts.length; j++){
ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
if(j == 0){
ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
}else{
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
}
}
}else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围
text = text.substring(0,6)+"||"+text.substring(6);
var texts = text.split("||");
for(var j = 0; j<texts.length; j++){
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
}
}else{
//在画布上绘制填色的文本。文本的默认颜色是黑色
//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
}
//添加对应图标
if(text.indexOf("闪币")>0){
var img= document.getElementById("shan-img");
img.onload=function(){
ctx.drawImage(img,-15,10);
};
ctx.drawImage(img,-15,10);
}else if(text.indexOf("谢谢参与")>=0){
var img= document.getElementById("sorry-img");
img.onload=function(){
ctx.drawImage(img,-15,10);
};
ctx.drawImage(img,-15,10);
}
//把当前画布返回（调整）到上一个save()状态之前
ctx.restore();
//----绘制奖品结束----
}
}
}

16
src/index.html
Unescape View File

@ -1,3 +1,11 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-25 08:48:54
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-27 11:39:39
-->
<!doctype html>
<html lang="zh-CN">
<head>
@ -15,7 +23,9 @@
<script src="https://webapi.amap.com/loca?v=2.0&key=e4b359dc7b03f9418b7497f807131346"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
<script src="/assets/js/jquery-3.5.1.min.js"></script>
<script src="/assets/js/kinerLottery.js"></script>
<script src="/assets/js/zepto.min.js"></script>
<!-- <script src="/assets/js/kinerLottery.js"></script>
<script src="/assets/js/zepto.min.js"></script> -->
<!-- <script src="/assets/js/zhuanpan.js"></script> -->
<script src="/assets/js/awardRotate.js"></script>
<script src="/assets/js/zhuanpan.js"></script>
</html>

Write Preview
Loading…
Cancel
Save