[筆記] 哎呀！不小心刻了一套 React UI 元件庫 27 – Progress Circle

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Circle 的實踐方法。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

參數

1. value
2. themeColor
3. strokeColor – 漸層顏色
4. isClockwise – 順時或是逆時針旋轉
5. size – 預設框大小，基本值給 100

---

概念

1. 與 Progress Bar 目的相同，展示當前的載入進度
2. 中央的 Circle 可以用 SVG 來做
3. 當我們藉由改變父值的 div 大小時，其內部的 SVG 可以藉由抓取這個值的大小，動態改變。因此會需要用到 useRef(),  和 window.resize 的監聽器
4. 圓形的 StrokeWidth 可以視比例調整，書上是用 0.08。如果是 1 的話，那就完全沒有「環」的效果
5. 圓形的半徑 = ( size – StrokeWidth ) / 2

---

SVG – Scalable Vector Graphics

1. 必須定義可視區塊大小，也就是 width 和 height，以 pixel 為單位
2. 內建不少的圖形標籤，像是 <circle>
3. <circle> 需要有 cx, cy 和 r 三個值，分別代表圓心座標 x, 圓心座標 y 和 半徑
4. stroke 如同 css 的 border，可以用 css 指定顏色和寬度 (Stroke-width)
5. 藉由圓形時候的 stroke-dasharray <線段長度 間隔長度>，藉由改變線斷長度 & 間隔長度設為一個極大的值，那就可以展現 Progress Circle 的比例了。線段長度的範圍是 0 ~ 圓周長 px。 以半徑為 50 的圓來說，線段長度的最大值是 314.16 左右
6. 起始值為 3 點鐘方向，需要先旋轉 -90 度才能改從 12 點鐘方向開始
7. 逆時針的效果是藉由 css 的水平翻轉來達成

SVG 漸層顏色

格式為以下結構：

1. 你需要有 id 才能在 css 中引用這個值，所以傳入的 stroke 內容可以遍歷一個物件來生成 <stop offset stop-color> </stop>

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/582865876b080af97d636d072d8d692603721f09

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 142
• [筆記] 程式必修課！離散數學與演算法 – 141
• [筆記] 程式必修課！離散數學與演算法 – 140
• [筆記] 程式必修課！離散數學與演算法 – 138
• [筆記] Nuxt2 + Buefy0.X + Axios 升級至 Nuxt4 + Buefy1.X + ofetch