一年前剛到新公司就接到可視化大屏項目，一看Ui，“頭很方”！因為查了現有的一些圖標庫，沒有直接可以拿來用的。以下是UI的一小小部分：

而如今從無到有，寫出react-super-progress圓形進度通用組件，能寫出虛線、實線、方形、圓形、漸變色、餅圖等各種進度，也算是一種進步吧；下面是各類實現效果截圖：

github地址：https://github.com/lvzhiyi/react-super-progress；

詳細文檔地址：http://120.78.184.181/progress-docs/#/elements/components/Progress；

npm:? ??npm install react-super-progress -S

?

?下面進入正題，分享出實現原理與組件實現步驟：

一、首先要掌握幾個重要的api

? ?svg 基礎知識、重點掌握屬性?strokeDasharray、基本元件（原型、矩形）、defs預定義屬性

?

二、圓形進度實現

? ?1、基本流程

? ? ? ?----> 利用svg基礎元件circle我們能畫出圓形

? ? ? ?---->??圖形顏色填充為空白（fiill: none）

　　 ---->? 利用svg邊框屬性storke可以畫出代邊框的圓形，storke-width控制邊框寬度，也就是原型厚度

? ? ? ?----> 重點：利用strokeDasharray屬性控制圓圈進度

　　前三步相對簡單沒有過多邏輯，這里不再贅述；

?

? ? ? 這里重點解釋一下第四步：在沒有strokeDasharray屬性的時候，邊框默認是實線且不可控制進度；strokeDasharray屬性接收任意數量字符串數字為屬性，用來表示邊框虛線的構成形式，奇數位表示虛線的實體部分，偶數位表示虛線空白部分。舉例說明：

　　strokeDasharray="10 20 30 20" 對應效果? ?------>??

　　而對應的我們使用?strokeDasharray="當前進度對應周長 圓形總周長"算法來實現對進度的控制，也就是第一個參數通過當前進度乘以對應周長控制實體虛線部分，總周長來控制空白部分（也可以用剩余百分比控制（1 - 進度值），這里為了便于計算，效果是一樣的）；距離說明：

　　比如當前進度75%，圓形周長為c：

　　對應的 ---->?strokeDasharray = "(75 / 100 * c)??(c)" ---->?

　　從而實現對圓圈進度的控制！方形進度同理。餅圖按照 半徑（r）/ 寬度（width）1:4的比例提供參數值即可實現。

?

二、虛線進度的實現

　　虛線進度與實現進度實現的原理大不相同，與strokeDasharray毫無關系，原理也相對簡單：將方形元件旋轉渲染至某個角度即可。

　　　　　　 ---->?

　　主要使用了transform屬性 ---->?transform=" rotate( 90,? 50 50) " ----> 第一個屬性值90代表旋轉角度，后面一對屬性值（50， 50）代表旋轉的圓心位置；

?

二、關于漸變色

　　1、普通進度圈的漸變色是根據svg預定義屬性defs創建漸變色塊，在圓圈內使用stroke屬性引用 ---->?stroke="#colors"

　　2、虛線進度因為是由不同元件旋轉渲染而成，所以通過漸變值分割成對應數量的漸變值數值，應用在每一個元件上；分割對應的漸變值相對復雜一些，感興趣的可參見源碼分析。

?

?

?

?

?

??

轉載于:https://www.cnblogs.com/lvzhiyiboke/p/10241287.html

總結

以上是生活随笔為你收集整理的react实现svg实线、虚线、方形进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。