CNCEC_SUBQHSE_WUHUAN/SGGL/FineUIPro.Web/res/assets/js/draw-circle.js

function drawCircle(obj) {
  var drawing_elem = document.getElementById(obj.drawing_elem);
  var width = drawing_elem.width;
  var height = drawing_elem.height;
  var percent = +drawing_elem.getAttribute("data-value");
  var percentfontcolor = obj.percentfontcolor;
  var unitfontcolor = obj.unitfontcolor;
  var percentfontsize = obj.percentfontsize || 15;
  var unitfontsize = obj.unitfontsize || 15;
  var unitvalue = obj.unitvalue || "%";
  var bgcolor = obj.bgcolor || "";
  var forecolor = obj.forecolor;
  var lineWidth = obj.lineWidth || 12;
  var speedstep = obj.speedstep || 3;
  var addLeft = obj.addLeft || 0;
  var lineGap = obj.lineGap || "";
  var center_x = width / 2;
  var center_y = height / 2;
  var rad = obj.rad || (Math.PI * 2) / 100;
  var radStart = obj.radStart || 0;
  var radEnd = obj.radEnd || Math.PI * 2;
  var radDrawStart = obj.radDrawStart || (-Math.PI * 1) / 2;
  var unitadd = obj.unitadd || (-Math.PI * 1) / 2;
  var speed = 0;

  var context = drawing_elem.getContext("2d");

  // 绘制背景圆圈
  function drawOuterCircle() {
    context.save();
    context.lineWidth = lineWidth;
    var radius = center_x - context.lineWidth;
    if (Object.prototype.toString.call(bgcolor) === "[object Array]") {
      var gradient = context.createLinearGradient(height, 0, 0, 0);
      bgcolor.forEach(function (item) {
        gradient.addColorStop(item.step, item.color);
      });
      context.strokeStyle = gradient;
    } else {
      context.strokeStyle = bgcolor;
    }
    if (lineGap) {
      context.lineCap = lineGap;
    }
    context.beginPath();
    context.arc(center_x, center_y, radius, radStart, radEnd, false);
    context.stroke();
    context.closePath();
    context.restore();
  }

  //绘制运动圆环
  function drawInnerCircle(n) {
    context.save();
    context.lineWidth = lineWidth;
    var radius = center_x - context.lineWidth;
    if (Object.prototype.toString.call(forecolor) === "[object Array]") {
      var gradient = context.createLinearGradient(height, 0, 0, 0);
      forecolor.forEach(function (item) {
        gradient.addColorStop(item.step, item.color);
      });
      context.strokeStyle = gradient;
    } else {
      context.strokeStyle = forecolor;
    }
    if (lineGap) {
      context.lineCap = lineGap;
    }
    context.beginPath();
    context.arc(
      center_x,
      center_y,
      radius,
      radDrawStart,
      radDrawStart + n * rad,
      false
    );
    context.stroke();
    context.closePath();
    context.restore();
  }

  //绘制文字
  function drawText(n) {
    //声明%
    context.save();
    context.font = unitfontsize + "px Helvetica";
    var text1_width = context.measureText(unitvalue).width;
    context.restore();

    //绘制数字
    context.save();
    var font_size = percentfontsize;
    var text_value = "";
    if (n % parseInt(n) > 0 && n % parseInt(n) < 1) {
      text_value = n.toFixed(2);
    } else if (n % parseInt(n) === 0 || n == 0) {
      text_value = n.toFixed(0);
    }
    context.fillStyle = percentfontcolor;
    context.font = font_size + "px Helvetica";
    var text_width = context.measureText(text_value).width;
    context.fillText(
      text_value,
      center_x - text_width / 2 - text1_width / 2 + addLeft,
      center_y + font_size / 2
    );
    context.restore();

    //绘制%
    context.save();
    context.fillStyle = unitfontcolor;
    context.fillText(
      unitvalue,
      center_x - text_width / 2 + text_width - text1_width / 2 + addLeft,
      center_y + unitfontsize / 2 + unitadd
    );
    context.restore();
  }

  // 绘制
  function startDraw(speed) {
    context.save();
    context.clearRect(0, 0, width, height);
    if (bgcolor) {
      drawOuterCircle();
    }
    drawText(speed);
    if (speed != 0) {
      drawInnerCircle(speed);
    }
    context.restore();
  }

  // 执行动画
  (function drawFrame() {
    if (percent == 0) {
      startDraw(speed);
      return;
    }
    if (speed >= percent) {
      speed = percent;
      startDraw(speed);
      return;
    }
    if (percent - speed >= speedstep) {
      speed += speedstep;
    } else {
      speed += percent - speed;
    }
    startDraw(speed);
    window.requestAnimationFrame(drawFrame);
  })();
}