利用 svg 制做环形进度条

前言

这两天作了个环形进度条的组件，以前用 css 作过，此次就打算尝试下用 svg 来作。

看一个进度条

它实际上是由两部分组成的，第一部分是背景的灰色圆圈，第二部分是蓝色的圆弧。两部分叠加就组成了环形进度条。

svg 的代码也很是简单，以下所示：

<svg width="240" height="240" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="70" stroke-width="30" stroke="#E5E5E5" fill="none" ></circle>
  <circle cx="100" cy="100" r="70" stroke-width="30" stroke="#506DFE" fill="none" transform="matrix(0, -1, 1, 0, 0, 200)" stroke-dasharray="219 439" ></circle>
</svg>
复制代码

代码中的各个参数是什么意思呢？

第一部分的灰色圆圈很好理解，第二部分的圆弧就多了些参数，正是这些参数产生了圆弧的效果。

旋转

circle 圆圈的默认起始点是右边，那么要把它的起始点变成顶点，那就须要作一个旋转。

旋转参数有多种写法，第一种是利用 rorate 来实现。

若是须要以 (100, 100) 为中心点旋转 -90 度，那么参数为 transform="rotate(-90, 100, 100)"。

第二种是利用矩阵来实现旋转，一样的旋转效果代码为 transform="matrix(0, -1, 1, 0, 0, 200)"，矩阵具体该怎么写，可参考这篇文章。

圆弧

circle 实现的是一个完整的圆圈，要实现圆弧效果该怎么作呢？

这里是利用的 stroke-dasharray 来实现的。

stroke-dasharray 在 svg 中表示描边的是虚线，它能够包含两个值，第一个值是虚线的宽度，第二个是虚线的间距，若是咱们把虚线的宽度设置成圆弧的长度，间距设置为超过空白圆弧的长度便可实现圆弧效果。

好比说实现一个 50% 的圆弧，那么第一个值就为 50% * 2 * Math.PI * r，第二个值直接设置为 2 * Math.PI * r，这样无论怎么变，空白圆弧的长度是够的。

总结

就这样，经过一个背景色的圆圈加一个圆弧就组成了一个环形进度条。

至于还有一些颜色设置，线条的圆角/方角就不一一介绍了。

附上生成 transform 参数及 stroke-dasharray 的两个辅助函数。

• 旋转矩阵

interface OriginCoordinate {
  x: number;
  y: number;
}

const rotateMatrixGenerator = (
  rotate: number,
  { x: currentOriginX, y: currentOriginY }: OriginCoordinate,
  { x: transformOriginX, y: transformOriginY }: OriginCoordinate
) => {
  const cos = Math.cos((rotate / 180) * Math.PI);
  const sin = Math.sin((rotate / 180) * Math.PI);

  return `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${transformOriginX - cos * currentOriginX + sin * currentOriginY}, ${transformOriginY - sin * currentOriginX - cos * currentOriginY})`;
};
复制代码

• 圆弧

const arcGenerator = (
  radius: number,
  percentage: number,
  arcAngle: number = 360
) => {
  return `${percentage * radius * 2 * Math.PI * (arcAngle / 360)} ${radius * 2 * Math.PI}`;
};
复制代码