被某良心想的教育集团逼迫考将近8小时的试时撸出来的第一版

Panel.js

@@ -0,0 +1,150 @@
+;(function (root, factory) {
+    if (typeof exports === 'object') {
+        module.exports = factory()
+    } else if (typeof define === 'function' && define.amd) {
+        define(factory)
+    } else {
+        root['panel'] = factory()
+    }
+})(this, function () {
+  var version = "1.0.0"
+  var DEBUG = true
+  if(DEBUG){
+    console.group("Panel.js APIs:")
+    console.log("panel(id,duration):\r\n\tid: 需要绑定的<canvas>标签的id。\r\n\tduration: 进入动画的时长。")
+    console.log("data-text-color: 需要绑定的<canvas>标签的属性，定义仪表盘字体颜色。")
+    console.log("data-background-color: 需要绑定的<canvas>标签的属性，定义仪表盘进度条的背景颜色。")
+    console.log("data-color: 需要绑定的<canvas>标签的属性，定义仪表盘进度条的前景颜色。")
+    console.log("data-label: 需要绑定的<canvas>标签的属性，定义仪表盘的上标签。")
+    console.log("data-score: 需要绑定的<canvas>标签的属性，number，定义仪表盘的进度，范围在0-100之间，更新会导致重新播放进入动画。")
+    console.log("data-pre-text: 需要绑定的<canvas>标签的属性，定义仪表盘的进度前面显示的文本。")
+    console.log("data-post-text: 需要绑定的<canvas>标签的属性，定义仪表盘的进度后面显示的文本。")
+    console.log("")
+    console.log("原则上支持所有MVVM框架更新属性，但在MVVM框架绑定元素前绑定<canvas>标签可能会导致问题。")
+    console.log("")
+    console.groupEnd("Panel.js详解")
+    console.log("Panel.js v"+version+" @zbLiuLiu zbliuliu.top 2020-现在")
+  }
+  
+  function a (id, dur) {
+    window.requestAnimFrame = (function () {
+      return (
+        window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        function (callback) {
+          window.setTimeout(callback, 1000 / 60)
+        }
+      )
+    })()
+
+    var canvas = document.getElementById(id),
+      ctx = canvas.getContext('2d'),
+      cWidth = canvas.width,
+      cHeight = canvas.height,
+      label = (canvas.attributes['data-label']||{"value":""}).value,
+      score = Number((canvas.attributes['data-score']||{"value":"0"}).value),
+      color = (canvas.attributes['data-color']||{"value":"#000000"}).value,
+      backgroundColor = (canvas.attributes['data-background-color']||{"value":"#BFBFBF"}).value,
+      textColor = (canvas.attributes['data-text-color']||{"value":"#000000"}).value,
+      pre_text=(canvas.attributes['data-pre-text']||{"value":""}).value,
+      post_text=(canvas.attributes['data-post-text']||{"value":""}).value,
+      radius = 140, //圆的半径
+      deg0 = Math.PI / 9, //每一格20度
+      blocks = 14,
+      mum = 1, //数字步长
+      /*
+                 * 要求：圆弧走完，数字得自加完，就得确定圆弧走的次数和数字走的次数相等！
+                 数字最大100，对应的度数是11*PI/9,那每个步长mum对应的度数如下：
+                 */
+      deg1 = (mum * Math.PI * blocks) / 9 / 100, // 每mum对应的度数
+      framesNumber = dur / (1000 / 60)
+
+    var angle = 0, 
+      credit = 0, 
+      mumsPerFrame = score / framesNumber
+
+    var drawFrame = function () {
+      if (canvas.attributes['data-label']&&canvas.attributes['data-label'].value !== label)
+        label = (canvas.attributes['data-label']||{"value":""}).value
+      if (canvas.attributes['data-color']&&canvas.attributes['data-color'].value !== color)
+        color = (canvas.attributes['data-color']||{"value":"#000000"}).value
+      if (canvas.attributes['data-background-color']&&canvas.attributes['data-background-color'].value !== backgroundColor)
+        backgroundColor = (canvas.attributes['data-background-color']||{"value":"#BFBFBF"}).value
+      if (canvas.attributes['data-text-color']&&canvas.attributes['data-text-color'].value !== textColor)
+        textColor = (canvas.attributes['data-text-color']||{"value":"#000000"}).value
+      if (canvas.attributes['data-pre-text']&&canvas.attributes['data-pre-text'].value !== pre_text)
+        pre_text = (canvas.attributes['data-pre-text']||{"value":""}).value
+      if (canvas.attributes['data-post-text']&&canvas.attributes['data-post-text'].value !== post_text)
+        post_text = (canvas.attributes['data-post-text']||{"value":""}).value
+      if (canvas.attributes['data-score']&&Number(canvas.attributes['data-score'].value) !== score) {
+        score = Number((canvas.attributes['data-score']||{"value":"0"}).value)
+        angle = 0 
+        credit = 0
+        mumsPerFrame = score / framesNumber
+      }
+      if (score < 0 || score > 100) {
+        console.log('"data-score"只能是0-100')
+        score = 100
+      }
+      ctx.save()
+      ctx.clearRect(0, 0, cWidth, cHeight)
+      ctx.translate(cWidth / 2, cHeight / 2)
+
+      var aim = (score * deg1) / mum 
+      if (angle < aim) {
+        angle += deg1 * mumsPerFrame
+      }
+
+      if (credit < score) {
+        credit += mumsPerFrame 
+      } else if (credit >= 100) {
+        credit = 100
+      } else {
+        credit = score
+      }
+      ctx.save()
+      ctx.restore()
+      //
+      text(Math.floor(credit) + '%', '50px Microsoft yahei', 0)
+      text(label, '25px Microsoft yahei', 40)
+
+      ctx.save()
+      ctx.beginPath()
+      ctx.strokeStyle = backgroundColor
+      ctx.lineWidth = 20
+      ctx.rotate(9 * deg0 - (blocks * deg0 - 9 * deg0) / 2)
+      ctx.arc(0, 0, radius, 0, blocks * deg0, false) //设置外圆环280度
+      ctx.stroke()
+      ctx.restore()
+      ctx.save()
+      ctx.restore()
+      ctx.beginPath()
+      ctx.lineWidth = 20
+      ctx.strokeStyle = color
+      ctx.rotate(9 * deg0 - (blocks * deg0 - 9 * deg0) / 2) //200度
+      ctx.arc(0, 0, radius, 0, angle, false) //动画圆环
+      ctx.stroke()
+      ctx.restore()
+
+      window.requestAnimFrame(drawFrame)
+    }
+
+    function text (process, font, y) {
+      ctx.save()
+      //ctx.rotate(10 * deg0) //200度
+      ctx.fillStyle = textColor
+      ctx.font = font
+      ctx.textAlign = 'center'
+      ctx.textBaseLine = 'top'
+      ctx.fillText(process, 0, y)
+      ctx.restore()
+    }
+
+    setTimeout(function () {
+      drawFrame()
+    }, 10)
+  }
+  a.version=version
+  return a
+})

dist/Panel.min.js

@@ -0,0 +1,9 @@
+(function(e,g){"object"===typeof exports?module.exports=g():"function"===typeof define&&define.amd?define(g):e.panel=g()})(this,function(){function e(g,e){function q(a,c,d){b.save();b.fillStyle=k;b.font=c;b.textAlign="center";b.textBaseLine="top";b.fillText(a,0,d);b.restore()}window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();var a=document.getElementById(g),b=a.getContext("2d"),
+r=a.width,t=a.height,l=(a.attributes["data-label"]||{value:""}).value,c=Number((a.attributes["data-score"]||{value:"0"}).value),m=(a.attributes["data-color"]||{value:"#000000"}).value,n=(a.attributes["data-background-color"]||{value:"#BFBFBF"}).value,k=(a.attributes["data-text-color"]||{value:"#000000"}).value,u=(a.attributes["data-pre-text"]||{value:""}).value,v=(a.attributes["data-post-text"]||{value:""}).value,d=Math.PI/9,w=14*Math.PI/9/100,x=e/(1E3/60),h=0,f=0,p=c/x,y=function(){a.attributes["data-label"]&&
+a.attributes["data-label"].value!==l&&(l=(a.attributes["data-label"]||{value:""}).value);a.attributes["data-color"]&&a.attributes["data-color"].value!==m&&(m=(a.attributes["data-color"]||{value:"#000000"}).value);a.attributes["data-background-color"]&&a.attributes["data-background-color"].value!==n&&(n=(a.attributes["data-background-color"]||{value:"#BFBFBF"}).value);a.attributes["data-text-color"]&&a.attributes["data-text-color"].value!==k&&(k=(a.attributes["data-text-color"]||{value:"#000000"}).value);
+a.attributes["data-pre-text"]&&a.attributes["data-pre-text"].value!==u&&(u=(a.attributes["data-pre-text"]||{value:""}).value);a.attributes["data-post-text"]&&a.attributes["data-post-text"].value!==v&&(v=(a.attributes["data-post-text"]||{value:""}).value);a.attributes["data-score"]&&Number(a.attributes["data-score"].value)!==c&&(c=Number((a.attributes["data-score"]||{value:"0"}).value),f=h=0,p=c/x);if(0>c||100<c)console.log('"data-score"\u53ea\u80fd\u662f0-100'),c=100;b.save();b.clearRect(0,0,r,t);
+b.translate(r/2,t/2);h<c*w&&(h+=w*p);f=f<c?f+p:100<=f?100:c;b.save();b.restore();q(Math.floor(f)+"%","50px Microsoft yahei",0);q(l,"25px Microsoft yahei",40);b.save();b.beginPath();b.strokeStyle=n;b.lineWidth=20;b.rotate(9*d-(14*d-9*d)/2);b.arc(0,0,140,0,14*d,!1);b.stroke();b.restore();b.save();b.restore();b.beginPath();b.lineWidth=20;b.strokeStyle=m;b.rotate(9*d-(14*d-9*d)/2);b.arc(0,0,140,0,h,!1);b.stroke();b.restore();window.requestAnimFrame(y)};setTimeout(function(){y()},10)}console.group("Panel.js APIs:");
+console.log("panel(id,duration):\r\n\tid: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684id\u3002\r\n\tduration: \u8fdb\u5165\u52a8\u753b\u7684\u65f6\u957f\u3002");console.log("data-text-color: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u5b57\u4f53\u989c\u8272\u3002");console.log("data-background-color: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u8fdb\u5ea6\u6761\u7684\u80cc\u666f\u989c\u8272\u3002");
+console.log("data-color: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u8fdb\u5ea6\u6761\u7684\u524d\u666f\u989c\u8272\u3002");console.log("data-label: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u7684\u4e0a\u6807\u7b7e\u3002");console.log("data-score: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0cnumber\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u7684\u8fdb\u5ea6\uff0c\u8303\u56f4\u57280-100\u4e4b\u95f4\uff0c\u66f4\u65b0\u4f1a\u5bfc\u81f4\u91cd\u65b0\u64ad\u653e\u8fdb\u5165\u52a8\u753b\u3002");
+console.log("data-pre-text: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u7684\u8fdb\u5ea6\u524d\u9762\u663e\u793a\u7684\u6587\u672c\u3002");console.log("data-post-text: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u7684\u8fdb\u5ea6\u540e\u9762\u663e\u793a\u7684\u6587\u672c\u3002");console.log("");console.log("\u539f\u5219\u4e0a\u652f\u6301\u6240\u6709MVVM\u6846\u67b6\u66f4\u65b0\u5c5e\u6027\uff0c\u4f46\u5728MVVM\u6846\u67b6\u7ed1\u5b9a\u5143\u7d20\u524d\u7ed1\u5b9a<canvas>\u6807\u7b7e\u53ef\u80fd\u4f1a\u5bfc\u81f4\u95ee\u9898\u3002");
+console.log("");console.groupEnd("Panel.js\u8be6\u89e3");console.log("Panel.js v1.0.0 @zbLiuLiu zbliuliu.top 2020-\u73b0\u5728");e.version="1.0.0";return e});