wux-weapp/packages/lib/circle/index.js

一套组件化、可复用、易扩展的微信小程序 UI 组件库

"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(e){var t=0<arguments.length&&void 0!==e?e:this.data.size,n="width: ".concat(t,"px; height: ").concat(t,"px;");this.setData({style:n})},redraw:function(e){var t=this,n=0<arguments.length&&void 0!==e?e:this.data.percent,a=percent(n),r=Date.now(),i=this.data.currentAngle>a,l=i?this.data.endAngle:this.data.currentAngle;this.cancelNextCallback(),this.clearTimer(),this.safeSetData({startAngle:l,endAngle:a},function(){t.animate(r,r,i)})},draw:function(e){var i=this,l=!(0<arguments.length&&void 0!==e)||e,t=this.data,n=this.data,s=n.lineCap,u=n.backgroundColor,o=n.color,c=n.size,h=n.strokeWidth,a=n.counterclockwise,d=n.background,g=c/2,p=g-h/2,r=2*Math.PI,f=a?r-t.beginAngle:t.beginAngle,v=a?r-(t.beginAngle+t.currentAngle):t.beginAngle+t.currentAngle;(0,_useCanvasAPI.getCanvasRef)(t.prefixCls,this).then(function(e){var t=e.getContext("2d"),n=(0,_useNativeAPI.getSystemInfoSync)(["window"]).pixelRatio,a=c*n,r=c*n;e.width=a,e.height=r,t.scale(n,n),t.fillRect(0,0,c,c),t.clearRect(0,0,c,c),d&&(t.beginPath(),t.arc(g,g,p,0,2*Math.PI),t.lineWidth=h,t.strokeStyle=u,t.stroke()),l&&(t.beginPath(),t.arc(g,g,p,f,v),t.lineWidth=h,t.strokeStyle=o,t.lineCap=s,t.stroke()),i.triggerEvent("change",{value:i.data.currentAngle})})},animate:function(e,t,n){var a=this,r=Date.now(),i=r-e<1?1:r-e,l=this.data,s=l.animate,u=l.speed,o=l.startAngle,c=l.endAngle,h=!n&&1e3*this.data.currentAngle<=Math.floor(1e3*c)||n&&1e3*this.data.currentAngle>=Math.floor(1e3*c);if(s&&e-t<1.05*u&&h){var d=easeInOutCubic((e-t)/i,o,c-o,u/i),g=d<0?0:d;e=Date.now(),this.safeSetData({currentAngle:g},function(){a.draw(0!==g),a.timer=setTimeout(function(){return a.animate(e,t,n)},1e3/60)})}else this.safeSetData({currentAngle:c},function(){return a.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()}});