利用 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}`;
};
複製代碼