| 1 |
- "use strict";var _baseComponent=_interopRequireDefault(require("../helpers/baseComponent")),_classNames=_interopRequireDefault(require("../helpers/libs/classNames")),_useNativeAPI=require("../helpers/hooks/useNativeAPI"),_useCanvasAPI=require("../helpers/hooks/useCanvasAPI");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var toAngle=function(e){return e/180*Math.PI},percent=function(e){return toAngle(e/100*360)},easeInOutCubic=function(e,t,n,a){return(e/=a/2)<1?n/2*e*e*e+t:n/2*((e-=2)*e*e+2)+t};(0,_baseComponent.default)({properties:{prefixCls:{type:String,value:"wux-circle"},percent:{type:Number,value:0,observer:"redraw"},strokeWidth:{type:Number,value:10},size:{type:Number,value:120,observer:"updateStyle"},lineCap:{type:String,value:"round"},backgroundColor:{type:String,value:"#f3f3f3"},color:{type:String,value:"#33cd5f"},sAngle:{type:Number,value:0,observer:function(e){this.setData({beginAngle:toAngle(e)})}},counterclockwise:{type:Boolean,value:!1},speed:{type:Number,value:2e3},animate:{type:Boolean,value:!0},background:{type:Boolean,value:!0}},data:{beginAngle:0,startAngle:0,endAngle:0,currentAngle:0},computed:{classes:["prefixCls",function(e){return{wrap:(0,_classNames.default)(e),inner:"".concat(e,"__inner")}}]},methods:{updateStyle:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.data.size,e="width: ".concat(e,"px; height: ").concat(e,"px;");this.setData({style:e})},redraw:function(){var e=this,t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.data.percent,t=percent(t),n=Date.now(),a=this.data.currentAngle>t,r=a?this.data.endAngle:this.data.currentAngle;this.cancelNextCallback(),this.clearTimer(),this.safeSetData({startAngle:r,endAngle:t},function(){e.animate(n,n,a)})},draw:function(){var r=this,i=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],e=this.data,t=this.data,l=t.lineCap,s=t.backgroundColor,u=t.color,o=t.size,c=t.strokeWidth,n=t.counterclockwise,h=t.background,d=o/2,g=d-c/2,t=2*Math.PI,p=n?t-e.beginAngle:e.beginAngle,f=n?t-(e.beginAngle+e.currentAngle):e.beginAngle+e.currentAngle;(0,_useCanvasAPI.getCanvasRef)(e.prefixCls,this).then(function(e){var t=e.getContext("2d"),n=(0,_useNativeAPI.getSystemInfoSync)(["window"]).pixelRatio,a=o*n;e.width=o*n,e.height=a,t.scale(n,n),t.fillRect(0,0,o,o),t.clearRect(0,0,o,o),h&&(t.beginPath(),t.arc(d,d,g,0,2*Math.PI),t.lineWidth=c,t.strokeStyle=s,t.stroke()),i&&(t.beginPath(),t.arc(d,d,g,p,f),t.lineWidth=c,t.strokeStyle=u,t.lineCap=l,t.stroke()),r.triggerEvent("change",{value:r.data.currentAngle})})},animate:function(e,t,n){var a,r=this,i=Date.now(),i=i-e<1?1:i-e,l=this.data,s=l.animate,u=l.speed,o=l.startAngle,c=l.endAngle,l=!n&&1e3*this.data.currentAngle<=Math.floor(1e3*c)||n&&1e3*this.data.currentAngle>=Math.floor(1e3*c);s&&e-t<1.05*u&&l?(s=easeInOutCubic((e-t)/i,o,c-o,u/i),a=s<0?0:s,e=Date.now(),this.safeSetData({currentAngle:a},function(){r.draw(0!==a),r.timer=setTimeout(function(){return r.animate(e,t,n)},1e3/60)})):this.safeSetData({currentAngle:c},function(){return r.draw(0!==c)})},clearTimer:function(){this.timer&&(clearTimeout(this.timer),this.timer=null)}},attached:function(){this.updateStyle(),0===this.data.percent&&this.draw(!1)},detached:function(){this.clearTimer()}});
|
