ChengDa_English/SGGL/FineUIPro.Web/res/indexv1/js/draw-circle.js

function drawCircle(obj) {
  var drawing_elem = document.getElementById(obj.drawing_elem);
  var percent = +drawing_elem.getAttribute("data-value");
  // drawing_elem = setupCanvas(drawing_elem)
  var width = drawing_elem.width;
  var height = drawing_elem.height;
  var percentfontcolor = obj.percentfontcolor;
  var unitfontcolor = obj.unitfontcolor;
  var percentfontsize = obj.percentfontsize || 15;
  var unitfontsize = obj.unitfontsize || 15;
  var unitvalue = obj.unitvalue || "%";
  var bordercolor = obj.bordercolor || "";
  var borderwidth = obj.borderwidth || 0;
  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 title = obj.title || "";
  var titlefontcolor = obj.titlefontcolor || "";
  var titlefontsize = obj.titlefontsize || 15;
  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 setupCanvas(canvas) {
  //   var dpr = (scale = window.devicePixelRatio || 1);
  //   var rect = canvas.getBoundingClientRect();
  //   canvas.width = rect.width * dpr;
  //   canvas.height = rect.height * dpr;
  //   canvas.style.width = rect.width + "px";
  //   canvas.style.height = rect.height + "px";
  //   return canvas;
  // }

  // 绘制边框圆环
  function drawOuterBorderCircle() {
    // 第一个圆
    context.save();
    context.lineWidth = borderwidth;
    context.beginPath();
    context.arc(
      center_x,
      center_y,
      center_x - borderwidth,
      radStart,
      radEnd,
      false
    );
    context.strokeStyle = bordercolor;
    context.stroke();
    context.closePath();
    context.restore();

    // 第二个圆
    context.save();
    context.lineWidth = borderwidth;
    context.beginPath();
    context.arc(
      center_x,
      center_y,
      center_x - lineWidth,
      radStart,
      radEnd,
      false
    );
    context.strokeStyle = bordercolor;
    context.stroke();
    context.closePath();
    context.restore();
  }

  // 绘制背景圆圈
  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 - (borderwidth ? context.lineWidth / 2 : 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 + (title ? -titlefontsize / 2 - 1 : 0)
    );
    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 +
        (title ? -titlefontsize / 2 - 5 : 0)
    );
    context.restore();

    // 绘制数字下面的说明
    if (title) {
      context.save();
      context.fillStyle = titlefontcolor;
      context.font = titlefontsize + "px Helvetica";
      var title_width = context.measureText(title).width;
      context.fillText(
        title,
        center_x - title_width / 2,
        center_y + titlefontsize / 2 + font_size / 2 + 1
      );
      context.restore();
    }
  }

  // 绘制
  function startDraw(speed) {
    context.save();
    context.clearRect(0, 0, width, height);

    if (bordercolor) {
      drawOuterBorderCircle();
    }
    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);
  })();
}