一年前剛到新公司就接到可視化大屏項(xiàng)目，一看Ui，“頭很方”！因?yàn)椴榱爽F(xiàn)有的一些圖標(biāo)庫(kù)，沒(méi)有直接可以拿來(lái)用的。以下是UI的一小小部分：

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

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

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

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

?

?下面進(jìn)入正題，分享出實(shí)現(xiàn)原理與組件實(shí)現(xiàn)步驟：

一、首先要掌握幾個(gè)重要的api

? ?svg 基礎(chǔ)知識(shí)、重點(diǎn)掌握屬性?strokeDasharray、基本元件（原型、矩形）、defs預(yù)定義屬性

?

二、圓形進(jìn)度實(shí)現(xiàn)

? ?1、基本流程

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

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

　　 ---->? 利用svg邊框?qū)傩詓torke可以畫出代邊框的圓形，storke-width控制邊框?qū)挾?#xff0c;也就是原型厚度

? ? ? ?----> 重點(diǎn)：利用strokeDasharray屬性控制圓圈進(jìn)度

　　前三步相對(duì)簡(jiǎn)單沒(méi)有過(guò)多邏輯，這里不再贅述；

?

? ? ? 這里重點(diǎn)解釋一下第四步：在沒(méi)有strokeDasharray屬性的時(shí)候，邊框默認(rèn)是實(shí)線且不可控制進(jìn)度；strokeDasharray屬性接收任意數(shù)量字符串?dāng)?shù)字為屬性，用來(lái)表示邊框虛線的構(gòu)成形式，奇數(shù)位表示虛線的實(shí)體部分，偶數(shù)位表示虛線空白部分。舉例說(shuō)明：

　　strokeDasharray="10 20 30 20" 對(duì)應(yīng)效果? ?------>??

　　而對(duì)應(yīng)的我們使用?strokeDasharray="當(dāng)前進(jìn)度對(duì)應(yīng)周長(zhǎng) 圓形總周長(zhǎng)"算法來(lái)實(shí)現(xiàn)對(duì)進(jìn)度的控制，也就是第一個(gè)參數(shù)通過(guò)當(dāng)前進(jìn)度乘以對(duì)應(yīng)周長(zhǎng)控制實(shí)體虛線部分，總周長(zhǎng)來(lái)控制空白部分（也可以用剩余百分比控制（1 - 進(jìn)度值），這里為了便于計(jì)算，效果是一樣的）；距離說(shuō)明：

　　比如當(dāng)前進(jìn)度75%，圓形周長(zhǎng)為c：

　　對(duì)應(yīng)的 ---->?strokeDasharray = "(75 / 100 * c)??(c)" ---->?

　　從而實(shí)現(xiàn)對(duì)圓圈進(jìn)度的控制！方形進(jìn)度同理。餅圖按照 半徑（r）/ 寬度（width）1:4的比例提供參數(shù)值即可實(shí)現(xiàn)。

?

二、虛線進(jìn)度的實(shí)現(xiàn)

　　虛線進(jìn)度與實(shí)現(xiàn)進(jìn)度實(shí)現(xiàn)的原理大不相同，與strokeDasharray毫無(wú)關(guān)系，原理也相對(duì)簡(jiǎn)單：將方形元件旋轉(zhuǎn)渲染至某個(gè)角度即可。

　　　　　　 ---->?

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

?

二、關(guān)于漸變色

　　1、普通進(jìn)度圈的漸變色是根據(jù)svg預(yù)定義屬性defs創(chuàng)建漸變色塊，在圓圈內(nèi)使用stroke屬性引用 ---->?stroke="#colors"

　　2、虛線進(jìn)度因?yàn)槭怯刹煌D(zhuǎn)渲染而成，所以通過(guò)漸變值分割成對(duì)應(yīng)數(shù)量的漸變值數(shù)值，應(yīng)用在每一個(gè)元件上；分割對(duì)應(yīng)的漸變值相對(duì)復(fù)雜一些，感興趣的可參見(jiàn)源碼分析。

?

?

?

?

?

??

轉(zhuǎn)載于:https://www.cnblogs.com/lvzhiyiboke/p/10241287.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。