1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | var windWidth = wx.getSystemInfoSync().windowWidth; Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 */ properties: { //画布的宽度 默认占屏幕宽度的0.4倍 canvasWidth: { type: Number, value: windWidth * 0.4 }, //线条宽度 默认10 lineWidth: { type: Number, value: 10 }, //线条颜色 默认"#393" lineColor: { type: String, value: "#393" }, //标题 默认“完成率” title: { type: String, value: "完成率" }, //当前的值 默认45 value: { type: Number, value: 45 }, //值的颜色 默认"#ff9c07" valueColor:{ type: String, value: "#ff9c07" }, //最大值 默认100 maxValue: { type: Number, value: 100 }, //最小值 默认0 minValue: { type: Number, value: 0 }, //当前值的后缀名 suffix: { type: null , value: "%" }, //从什么角度开始 0~360之间 (12点方向为0,18点方向为180,0点方向为360) startDegree: { type: Number, value: 0 } }, /** * 组件的初始数据 */ data: { canvasWidth: windWidth * 0.4, isMarginTop: true }, /** * 组件的方法列表 */ methods: { showCanvasRing() { //去掉首位空格后如果标题为空,那么当前值的区域就没有margin-top值 if ( this .data.title.replace(/(^\s*)|(\s*$)/g, "" ).length == 0) { this .setData({ isMarginTop: false }) } //作画 var ctx = wx.createCanvasContext( "circleBar" , this ); //canvas组建封装,需要后加个this var circle_r = this .data.canvasWidth / 2; //画布的一半,用来找中心点和半径 var startDegree = this .data.startDegree; //从什么角度开始 var maxValue = this .data.maxValue; //最大值 var minValue = this .data.minValue; //最小值 var value = this .data.value; //当前的值 var lineColor = this .data.lineColor; //线条颜色 var lineWidth = this .data.lineWidth; //线条宽度 var percent = 360 * ((value - minValue) / (maxValue - minValue)); //计算结果 //定义起始点 ctx.translate(circle_r, circle_r); //灰色圆弧 ctx.beginPath(); ctx.setStrokeStyle( "#ebebeb" ); ctx.setLineWidth(lineWidth); ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true ); ctx.stroke(); ctx.closePath(); //有色彩的圆弧 ctx.beginPath(); ctx.setStrokeStyle(lineColor); ctx.setLineWidth(lineWidth); ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false ); ctx.stroke(); ctx.closePath(); ctx.draw(); } } }) |