使用代码实现精美的环形进度条

前端

2023-09-15 09:44:37

在应用程序和网站设计中，进度条是不可或缺的元素，可以直观地向用户传达任务或过程的进展情况。其中，环形进度条以其优雅的外观和简洁的视觉效果而广受青睐。本文将深入探讨如何使用代码实现一个精美的环形进度条。

原理与实现

环形进度条本质上是由两个半圆拼成的整圆。其中，一个半圆表示进度已完成的部分，另一个半圆表示剩余未完成的部分。要实现环形进度条，我们可以使用 HTML、CSS 和 JavaScript 等技术。

具体步骤如下：

创建 HTML 结构： 创建一个 div 元素作为环形进度条的容器，并在其中放置两个 svg 元素，分别表示进度已完成的部分和剩余未完成的部分。
定义 SVG 形状： 使用 SVG 的 path 元素来定义这两个半圆的形状。将 d 属性设置为绘制半圆所需的命令。
设置 CSS 样式： 使用 CSS 来控制进度条的外观，包括其大小、颜色、边框等属性。还需使用 transform 属性来旋转进度已完成部分，以指示进度。
编写 JavaScript 代码： 使用 JavaScript 来控制进度条的更新。通过操纵 SVG 的 d 属性或使用 CSS 的 transform 属性，可以根据需要动态地更改进度已完成部分的长度。

使用 Canvas 实现

除了 SVG，还可以使用 Canvas 来实现环形进度条。Canvas 是一种用于在网页上绘制图形的低级 API。

使用 Canvas 实现环形进度条的步骤：

获取 Canvas 上下文： 获取 Canvas 元素的上下文，以便绘制图形。
绘制背景圆： 使用 beginPath()、arc() 和 stroke() 方法绘制背景圆。
绘制进度圆： 使用同样的方法绘制进度圆，但需控制 arc() 方法的起始和结束角度，以指示进度。
更新进度： 使用 JavaScript 来更新进度圆的起始和结束角度，从而动态地改变进度。

示例代码

以下是一个使用 JavaScript 和 SVG 实现的环形进度条的示例代码：

<div id="progress-container">
  <svg id="progress-completed"></svg>
  <svg id="progress-remaining"></svg>
</div>

#progress-container {
  width: 100px;
  height: 100px;
}

#progress-completed,
#progress-remaining {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#progress-completed {
  stroke: green;
  stroke-width: 10;
  stroke-linecap: round;
}

#progress-remaining {
  stroke: lightgray;
  stroke-width: 10;
  stroke-linecap: round;
}

const container = document.getElementById('progress-container');
const completed = document.getElementById('progress-completed');
const remaining = document.getElementById('progress-remaining');

let progress = 0;

function updateProgress(value) {
  progress = value;

  const radius = container.offsetWidth / 2;
  const circumference = 2 * Math.PI * radius;

  const startAngle = -Math.PI / 2;
  const endAngle = startAngle + (progress / 100) * 2 * Math.PI;

  completed.setAttribute('d', describeArc(radius, startAngle, endAngle));
  remaining.setAttribute('d', describeArc(radius, endAngle, startAngle + 2 * Math.PI));
}

function describeArc(radius, startAngle, endAngle) {
  const x1 = radius + radius * Math.cos(startAngle);
  const y1 = radius + radius * Math.sin(startAngle);
  const x2 = radius + radius * Math.cos(endAngle);
  const y2 = radius + radius * Math.sin(endAngle);
  const largeArcFlag = endAngle - startAngle <= Math.PI ? 0 : 1;

  return `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`;
}

updateProgress(50);