vue-analog-clock/dist/index.js

基于Vue的模拟时钟组件

!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("vue"));else if("function"==typeof define&&define.amd)define(["vue"],e);else{var n="object"==typeof exports?e(require("vue")):e(t.Vue);for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}("undefined"!=typeof self?self:this,function(t){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=11)}([function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n=t.exports={version:"2.6.1"};"number"==typeof __e&&(__e=n)},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){t.exports=!n(4)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,n){"use strict";var r=n(14),o=n.n(r),i=n(43),a=n.n(i),s=n(44),c=n.n(s);e.a=a.a.extend({props:{size:{type:Number},time:{type:[String,Date]},padding:{type:Number},borderWidth:{type:Number},borderColor:{type:String},borderImage:{type:String},backgroundColor:{type:String},backgroundImage:{type:String},backgroundMode:{type:String},backgroundAlpha:{type:Number},scaleType:{type:String},scaleColor:{type:String},hourColor:{type:String},handType:{type:String},secondHandColor:{type:String},minuteHandColor:{type:String},hourHandColor:{type:String},showShadow:{type:Boolean}},data:function(){return{clock:null}},mounted:function(){var t=this,e=!this.time,n=o()({},this.$props,e?{}:{onload:function(e){return e.show(t.time)}});this.clock=new c.a(this.$refs.clock,n),e&&this.clock.run()},beforeDestroy:function(){this.stop()},methods:{updateOptions:function(t){this.clock&&this.clock.setOptions(this.$props)},run:function(){this.clock&&this.clock.run()},stop:function(){this.clock&&this.clock.stop()}},watch:{size:function(){this.updateOptions()},time:function(){this.clock&&this.clock.show(this.time)},padding:function(){this.updateOptions()},borderWidth:function(){this.updateOptions()},borderColor:function(){this.updateOptions()},borderImage:function(){this.updateOptions()},backgroundColor:function(){this.updateOptions()},backgroundImage:function(){this.updateOptions()},backgroundMode:function(){this.updateOptions()},backgroundAlpha:function(){this.updateOptions()},scaleType:function(){this.updateOptions()},scaleColor:function(){this.updateOptions()},hourColor:function(){this.updateOptions()},handType:function(){this.updateOptions()},secondHandColor:function(){this.updateOptions()},minuteHandColor:function(){this.updateOptions()},hourHandColor:function(){this.updateOptions()},showShadow:function(){this.updateOptions()}}})},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(8),o=n(9);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(31);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(12);n.d(e,"AnalogClock",function(){return r.a}),e.default={install:function(t){t.component("AnalogClock",r.a)}}},function(t,e,n){"use strict";var r=n(5),o=n(45),i=n(13)(r.a,o.a,!1,null,null,null);e.a=i.exports},function(t,e){t.exports=function(t,e,n,r,o,i){var a,s=t=t||{},c=typeof t.default;"object"!==c&&"function"!==c||(a=t,s=t.default);var u,l="function"==typeof s?s.options:s;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0),n&&(l.functional=!0),o&&(l._scopeId=o),i?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},l._ssrRegister=u):r&&(u=r),u){var h=l.functional,f=h?l.render:l.beforeCreate;h?(l._injectStyles=u,l.render=function(t,e){return u.call(e),f(t,e)}):l.beforeCreate=f?[].concat(f,u):[u]}return{esModule:a,exports:s,options:l}}},function(t,e,n){"use strict";e.__esModule=!0;var r,o=n(15),i=(r=o)&&r.__esModule?r:{default:r};e.default=i.default||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}},function(t,e,n){t.exports={default:n(16),__esModule:!0}},function(t,e,n){n(17),t.exports=n(1).Object.assign},function(t,e,n){var r=n(18);r(r.S+r.F,"Object",{assign:n(28)})},function(t,e,n){var r=n(0),o=n(1),i=n(19),a=n(21),s=n(6),c=function(t,e,n){var u,l,h,f=t&c.F,d=t&c.G,p=t&c.S,v=t&c.P,y=t&c.B,b=t&c.W,g=d?o:o[e]||(o[e]={}),w=g.prototype,m=d?r:p?r[e]:(r[e]||{}).prototype;for(u in d&&(n=e),n)(l=!f&&m&&void 0!==m[u])&&s(g,u)||(h=l?m[u]:n[u],g[u]=d&&"function"!=typeof m[u]?n[u]:y&&l?i(h,r):b&&m[u]==h?function(t){var e=function(e,n,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,r)}return t.apply(this,arguments)};return e.prototype=t.prototype,e}(h):v&&"function"==typeof h?i(Function.call,h):h,v&&((g.virtual||(g.virtual={}))[u]=h,t&c.R&&w&&!w[u]&&a(w,u,h)))};c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},function(t,e,n){var r=n(20);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){var r=n(22),o=n(27);t.exports=n(3)?function(t,e,n){return r.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(23),o=n(24),i=n(26),a=Object.defineProperty;e.f=n(3)?Object.defineProperty:function(t,e,n){if(r(t),e=i(e,!0),r(n),o)try{return a(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(2);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e,n){t.exports=!n(3)&&!n(4)(function(){return 7!=Object.defineProperty(n(25)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(2),o=n(0).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e,n){var r=n(2);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){"use strict";var r=n(29),o=n(40),i=n(41),a=n(42),s=n(8),c=Object.assign;t.exports=!c||n(4)(function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach(function(t){e[t]=t}),7!=c({},t)[n]||Object.keys(c({},e)).join("")!=r})?function(t,e){for(var n=a(t),c=arguments.length,u=1,l=o.f,h=i.f;c>u;)for(var f,d=s(arguments[u++]),p=l?r(d).concat(l(d)):r(d),v=p.length,y=0;v>y;)h.call(d,f=p[y++])&&(n[f]=d[f]);return n}:c},function(t,e,n){var r=n(30),o=n(39);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e,n){var r=n(6),o=n(7),i=n(32)(!1),a=n(35)("IE_PROTO");t.exports=function(t,e){var n,s=o(t),c=0,u=[];for(n in s)n!=a&&r(s,n)&&u.push(n);for(;e.length>c;)r(s,n=e[c++])&&(~i(u,n)||u.push(n));return u}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r=n(7),o=n(33),i=n(34);t.exports=function(t){return function(e,n,a){var s,c=r(e),u=o(c.length),l=i(a,u);if(t&&n!=n){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===n)return t||l||0;return!t&&-1}}},function(t,e,n){var r=n(10),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(10),o=Math.max,i=Math.min;t.exports=function(t,e){return(t=r(t))<0?o(t+e,0):i(t,e)}},function(t,e,n){var r=n(36)("keys"),o=n(38);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e,n){var r=n(1),o=n(0),i=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(t.exports=function(t,e){return i[t]||(i[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n(37)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports=!0},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(9);t.exports=function(t){return Object(r(t))}},function(e,n){e.exports=t},function(t,e,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},o=this&&this.__awaiter||function(t,e,n,r){return new(n||(n=Promise))(function(o,i){function a(t){try{c(r.next(t))}catch(t){i(t)}}function s(t){try{c(r.throw(t))}catch(t){i(t)}}function c(t){t.done?o(t.value):new n(function(e){e(t.value)}).then(a,s)}c((r=r.apply(t,e||[])).next())})},i=this&&this.__generator||function(t,e){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(i){return function(s){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=(o=a.trys).length>0&&o[o.length-1])&&(6===i[0]||2===i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=e.call(t,a)}catch(t){i=[6,t],r=0}finally{n=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,s])}}};Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(t,e){if(void 0===e&&(e={}),this.options={size:300,padding:5,borderWidth:15,borderColor:"black",scaleType:"arabic",scaleColor:"#666",hourColor:"#666",backgroundColor:"white",secondHandColor:"red",minuteHandColor:"#666",hourHandColor:"black",backgroundMode:"full",showShadow:!0,handType:"triangle",backgroundAlpha:.5},this.interval=null,this.hours=[],this.largeScale=0,this.smallScale=0,this.hourFontSize=0,this.headLen=0,this.secondHandLen=0,this.minuteHandLen=0,this.hourHandLen=0,this.borderPattern=null,this.halfSize=0,this.container=null,this.ctx=null,this.dialCanvas=document.createElement("canvas"),this.dialCtx=this.dialCanvas.getContext("2d"),!t)throw new Error("请传入canvas参数！");var n=t;if("string"==typeof t&&(n=document.getElementById(t)),!(n instanceof HTMLCanvasElement))throw new Error("传入的canvas参数不是一个HTMLCanvasElement对象！");this.container=n,this.ctx=n.getContext("2d"),this.setOptions(e)}return t.prototype.init=function(){return o(this,void 0,void 0,function(){var t,e,n,r,o,a,s,c,u,l,h;return i(this,function(i){switch(i.label){case 0:return t=this.options,e=t.size,n=t.borderWidth,r=t.borderImage,o=t.padding,a=t.scaleType,s=void 0===a?"arabic":a,c=t.backgroundImage,u=t.onload,this.halfSize=.5*e,this.dialCanvas.width=this.container.width=e,this.dialCanvas.height=this.container.height=e,this.largeScale=(this.halfSize-o-n)/12,this.smallScale=.5*this.largeScale,this.hourFontSize=1.2*this.largeScale,this.headLen=1.5*this.smallScale,this.secondHandLen=12*this.headLen,this.minuteHandLen=10*this.headLen,this.hourHandLen=7*this.headLen,this.ctx.translate(this.halfSize,this.halfSize),this.dialCtx.translate(this.halfSize,this.halfSize),this.hours="roman"==s?["XII","I","II","III","IV","V","VI","VII","VIII","IX","X","XI"]:"arabic"==s?["12","1","2","3","4","5","6","7","8","9","10","11"]:[],r?(l=this,[4,this.createPattern(this.dialCtx,r,"repeat")]):[3,2];case 1:l.borderPattern=i.sent(),i.label=2;case 2:return c?(h=this,[4,this.createImage(c)]):[3,4];case 3:h.backgroundImage=i.sent(),i.label=4;case 4:return this.drawDial(this.dialCtx),u instanceof Function&&u(this),[2]}})})},t.prototype.polarCoordinates2canvasCoordinates=function(t,e){return e-=.5*Math.PI,{x:t*Math.cos(e),y:t*Math.sin(e)}},t.prototype.drawHours=function(t,e,n,r){t.save(),t.fillStyle=this.options.hourColor,t.font=this.hourFontSize+"px 微软雅黑";var o=t.measureText(n).width,i=this.hourFontSize,a=r.x,s=r.y;switch(e){case 0:a-=.5*o,s+=i;break;case 1:a-=o,s+=i;break;case 2:a-=o+5,s+=i-5;break;case 3:a-=o+5,s+=.5*i;break;case 4:a-=o+5;break;case 5:a-=o;break;case 6:a-=.5*o,s-=5;break;case 8:a+=5;break;case 9:a+=5,s+=.5*i;break;case 10:a+=5,s+=i-5;break;case 11:s+=i}t.fillText(n,a,s),t.restore()},t.prototype.createImage=function(t){var e=this;return new Promise(function(n,r){var o=new Image;o.onload=function(){n(o)},o.onerror=function(){r(new Error("图片加载出错!")),e.stop()},o.src=t})},t.prototype.createPattern=function(t,e,n){var r=this;return new Promise(function(o,i){var a=new Image;a.onload=function(){o(t.createPattern(a,n))},a.onerror=function(){i(new Error("图片加载出错!")),r.stop()},a.src=e})},t.prototype.drawDial=function(t){var e=this.options,n=e.padding,r=e.borderWidth,o=e.borderColor,i=e.borderImage,a=e.scaleColor,s=e.backgroundColor,c=e.backgroundImage,u=e.backgroundMode,l=e.backgroundAlpha,h=e.showShadow,f=this.hours,d=this.halfSize;t.save();var p=d-n-(h?15:0);t.arc(0,0,p,0,2*Math.PI,!0),i&&this.borderPattern?t.fillStyle=this.borderPattern:t.fillStyle=o;var v=p-r;if(t.arc(0,0,v,0,2*Math.PI,!1),h&&(t.shadowBlur=10,t.shadowColor="#666",t.shadowOffsetX=5,t.shadowOffsetY=5),t.fill(),t.restore(),t.beginPath(),t.save(),c&&this.backgroundImage){var y=this.backgroundImage,b=y.width,g=y.height,w="full"==u?v:v-this.largeScale-this.hourFontSize-15;t.globalAlpha=l,t.arc(0,0,w,0,2*Math.PI),t.clip();var m=2*w/Math.min(b,g);t.drawImage(this.backgroundImage,-w,-w,b*m,g*m)}else"white"!=s&&(t.arc(0,0,v,0,2*Math.PI),t.fillStyle=s,t.fill());t.restore();var x=Math.PI/30;for(m=0;m<60;m++){var S=x*m,C=this.polarCoordinates2canvasCoordinates(v,S),k=0==m%5?this.largeScale:this.smallScale,I=this.polarCoordinates2canvasCoordinates(v-k,S);if(t.beginPath(),t.save(),0==m%5){if(t.lineWidth=3,f&&12==f.length){var O=m/5;this.drawHours(t,O,f[O],I)}}else t.lineWidth=1;t.strokeStyle=a,t.moveTo(C.x,C.y),t.lineTo(I.x,I.y),t.stroke(),t.restore()}},t.prototype.drawHand=function(t,e){void 0===e&&(e=new Date);var n=this.options,r=n.secondHandColor,o=n.minuteHandColor,i=n.hourHandColor;this.drawNeedle(t,e.getHours()*Math.PI/6+e.getMinutes()*Math.PI/360,i,this.hourHandLen),this.drawNeedle(t,e.getMinutes()*Math.PI/30,o,this.minuteHandLen),this.drawNeedle(t,e.getSeconds()*Math.PI/30,r,this.secondHandLen)},t.prototype.drawNeedle=function(t,e,n,r){if("triangle"==this.options.handType){var o=this.polarCoordinates2canvasCoordinates(r,e),i=this.polarCoordinates2canvasCoordinates(6,e-.5*Math.PI),a=this.polarCoordinates2canvasCoordinates(6,e+.5*Math.PI);t.beginPath(),t.save(),t.moveTo(o.x,o.y),t.lineTo(i.x,i.y),t.lineTo(a.x,a.y),t.closePath(),t.fillStyle=n,t.shadowBlur=5,t.shadowColor="#666",t.shadowOffsetX=2,t.shadowOffsetY=2,t.fill(),r==this.secondHandLen&&(t.beginPath(),t.beginPath(),t.fillStyle="yellow",t.arc(0,0,8,0,2*Math.PI),t.fill()),t.restore()}else{var s=this.polarCoordinates2canvasCoordinates(this.headLen,e-Math.PI);o=this.polarCoordinates2canvasCoordinates(r,e);if(t.beginPath(),t.save(),t.moveTo(s.x,s.y),t.lineTo(o.x,o.y),t.strokeStyle=n,r==this.hourHandLen?t.lineWidth=3:r==this.minuteHandLen&&(t.lineWidth=2),t.stroke(),r==this.secondHandLen){t.beginPath(),t.fillStyle=n,t.arc(0,0,3,0,2*Math.PI),t.fill(),t.beginPath();var c=this.polarCoordinates2canvasCoordinates(r-10,e),u=c.x,l=c.y;t.arc(u,l,2,0,2*Math.PI),t.fill()}t.restore()}},t.prototype.setOptions=function(t){void 0===t&&(t={});var e={};Object.keys(t).forEach(function(n){var r=t[n];void 0!==r&&(e[n]=r)}),this.options=r({},this.options,e),this.init()},t.prototype.show=function(t){var e=this.options,n=e.size,r=e.borderImage,o=e.backgroundImage,i=this.ctx,a=this.hourFontSize;if(this.ctx.clearRect(-this.halfSize,-this.halfSize,n,n),r&&!this.borderPattern||o&&!this.backgroundImage)return i.save(),i.font=a+"px 微软雅黑",i.fillText("loading...",this.halfSize,this.halfSize),void i.stroke();if(i.drawImage(this.dialCanvas,-this.halfSize,-this.halfSize),"string"==typeof t){if(!/^\d{1,2}(:\d{1,2}){2}$/.test(t))throw new Error("参数格式：HH:mm:ss");var s=t.split(":").map(function(t){return parseInt(t)}),c=s[0],u=s[1],l=s[2];(t=new Date).setHours(c),t.setMinutes(u),t.setSeconds(l)}return this.drawHand(i,t),this},t.prototype.run=function(){var t=this;return this.show(),this.interval||(this.interval=setInterval(function(){t.show()},1e3)),this},t.prototype.stop=function(){this.interval&&(clearInterval(this.interval),this.interval=null)},t}();e.default=a,window.Clock=a},function(t,e,n){"use strict";var r={render:function(){var t=this.$createElement;return(this._self._c||t)("canvas",{ref:"clock"})},staticRenderFns:[]};e.a=r}])});