tp-lottery
Version:
2 lines • 7.31 kB
JavaScript
(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["tp-lottery"]=e():t["tp-lottery"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var i=e[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s="fb15")}({"09dd":function(t,e,r){t.exports=r.p+"img/go.589c5aa8.png"},"21f4":function(t,e,r){t.exports=r.p+"img/dot.aa8cf1bd.png"},"471f":function(t,e,r){},8875:function(t,e,r){var n,i,a;(function(r,o){i=[],n=o,a="function"===typeof n?n.apply(e,i):n,void 0===a||(t.exports=a)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(h){var r,n,i,a=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,o=/@([^@]*):(\d+):(\d+)\s*$/gi,s=a.exec(h.stack)||o.exec(h.stack),c=s&&s[1]||!1,d=s&&s[2]||!1,l=document.location.href.replace(document.location.hash,""),u=document.getElementsByTagName("script");c===l&&(r=document.documentElement.outerHTML,n=new RegExp("(?:[^\\n]+?\\n){0,"+(d-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),i=r.replace(n,"$1").trim());for(var f=0;f<u.length;f++){if("interactive"===u[f].readyState)return u[f];if(u[f].src===c)return u[f];if(c===l&&u[f].innerHTML&&u[f].innerHTML.trim()===i)return u[f]}return null}}return t}))},"91a4":function(t,e,r){"use strict";r("471f")},fb15:function(t,e,r){"use strict";if(r.r(e),"undefined"!==typeof window){var n=window.document.currentScript,i=r("8875");n=i(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:i});var a=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);a&&(r.p=a[1])}var o=function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"lottery",style:{backgroundColor:t.mergedData.bgColor}},[r("div",{staticClass:"turntable",style:{background:"url('"+t.mergedData.dotImage+"') no-repeat center center / 92%"}}),t._v(" "),r("canvas",{style:{transform:"rotate("+t.rotateDeg+"deg)"},attrs:{id:"canvas",width:t.mergedData.width,height:t.mergedData.height}}),t._v(" "),r("img",{staticClass:"lottery-go",attrs:{src:t.mergedData.goImage},on:{click:function(e){return e.stopPropagation(),t.startRotation(e)}}})])},s=[],c={name:"v-lottery",props:{data:{type:Object,required:!0,default:()=>{}},disabled:Boolean},data(){return{flag:!1,piece:0,rotateDeg:0,defaultData:{data:[],target:"",bgColor:"#ff5859",dotImage:r("21f4"),goImage:r("09dd"),width:350,height:350}}},computed:{startAngle(){const t=360/this.mergedData.data.length/2;return t*Math.PI/180},outsideRadius(){return 13*this.mergedData.width/30},textRadius(){return.35*this.mergedData.width},mergedData(){return{...this.defaultData,...this.data}}},watch:{disabled(t){this.flag=t}},mounted(){this.setLotteryHeight(),window.addEventListener("resize",()=>{this.setLotteryHeight()}),this.drawLottery(),this.$watch("mergedData.target",()=>{if(this.mergedData.target){let t=this.getTargetAngel();this.rotateDeg+=270-t+(360-this.rotateDeg%360)+1800}});const t=document.getElementById("canvas");t.addEventListener("transitionend",()=>{this.flag=!1,this.$emit("onstop")})},methods:{setLotteryHeight(){const t=document.querySelector(".lottery");t.style.height=t.clientWidth+"px"},drawLottery(){const t=document.getElementById("canvas"),e=t.getContext("2d");let r=window.devicePixelRatio||1,n=e.webkitBackingStorePixelRatio||e.mozBackingStorePixelRatio||e.msBackingStorePixelRatio||e.oBackingStorePixelRatio||e.backingStorePixelRatio||1,i=r/n;t.width=t.width*i,t.height=t.height*i,e.scale(i,i),e.translate(.5,.5),this.ctx=e;const[a,o,s,c]=[this.mergedData.width,this.mergedData.height,this.mergedData.width/2,this.mergedData.height/2];this.centerX=s,this.centerY=c;let d=Math.PI/(this.mergedData.data.length/2);this.piece=d,e.clearRect(0,0,a,o),e.strokeStyle="transparent",e.font="16px Microsoft YaHei",this.mergedData.data.forEach((t,r)=>{let n=this.startAngle+r*d;e.fillStyle=t.color||"transparent",e.beginPath(),e.moveTo(s,c),e.arc(s,c,this.outsideRadius,n,n+d,!1),e.closePath(),e.fill(),e.stroke(),e.save(),this.drawTitle(t,n,d),t.src&&this.drawImage(t,n,d)})},resetCoordinate(t,e){const r=this.ctx;let n=this.centerX+Math.cos(t+e/2)*this.textRadius,i=this.centerY+Math.sin(t+e/2)*this.textRadius;r.translate(n,i),r.rotate(t+e/2+Math.PI/2)},drawTitle(t,e,r){const n=this.ctx;n.fillStyle="#ffffff",n.font="12px 宋体",this.resetCoordinate(e,r),n.fillText(t.title,-n.measureText(t.title).width/2,50),n.restore(),n.save()},calcImgSize(t){let[e,r,n,i]=[];return t.width>t.height?(e=60,r=60*t.height/t.width,n=-30,i=-15):(r=50,e=50*t.width/t.height,n=-20,i=-15),[e,r,n,i]},preImage(t,e){const r=new Image;if(r.src=t,r.complete){const[t,n,i,a]=this.calcImgSize(r);e.call(r,i,a,t,n)}else r.onload=()=>{const[t,n,i,a]=this.calcImgSize(r);e.call(r,i,a,t,n)}},drawImage(t,e,r){const n=this.ctx,i=this;this.preImage(t.src,(function(t,a,o,s){n.save(),i.resetCoordinate(e,r),n.drawImage(this,t,a,o,s),n.restore()}))},getTargetAngel(){let t=this.mergedData.data.findIndex(t=>t.rewardId===this.mergedData.target);return-1!==t?180*(this.piece*(t+.5)+this.startAngle)/Math.PI:360},startRotation(){this.flag||(this.$emit("onstart"),this.flag=!0)}}},d=c;r("91a4");function l(t,e,r,n,i,a,o,s){var c,d="function"===typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=r,d._compiled=!0),n&&(d.functional=!0),a&&(d._scopeId="data-v-"+a),o?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=c):i&&(c=s?function(){i.call(this,(d.functional?this.parent:this).$root.$options.shadowRoot)}:i),c)if(d.functional){d._injectStyles=c;var l=d.render;d.render=function(t,e){return c.call(e),l(t,e)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,c):[c]}return{exports:t,options:d}}var u=l(d,o,s,!1,null,"d5efbc8a",null),f=u.exports;f.install=function(t){t.component(f.name,f)};var h=f;const g=[h],p=function(t){p.installed||g.map(e=>t.component(e.name,e))};"undefined"!==typeof window&&window.Vue&&p(window.Vue);var m={install:p,tpLottery:h};e["default"]=m}})}));
//# sourceMappingURL=tp-lottery.umd.min.js.map