前言

如果你一眼就看出這個(gè)是需要怎么做，那這篇文章對(duì)你可能沒有用。

乍看之下，這個(gè)和百分比圓環(huán)圖（之前寫過）好像很相似，但又有細(xì)微的不同，你沒法使用圓環(huán)圖的實(shí)現(xiàn)思路——兩個(gè)長(zhǎng)方形擋住，然后控制旋轉(zhuǎn)來顯示進(jìn)度。

怎么辦？

這時(shí)候，就需要你隱隱約約想起之前好像有個(gè)屬性，似乎可以達(dá)成這個(gè)效果。

實(shí)現(xiàn)思路

先簡(jiǎn)單介紹下需要用到的CSS——clip-path 里面有 5種基礎(chǔ)形狀：inset（長(zhǎng)方形），circle（圓形），ellipse（橢圓），polygon（多邊形），path（路徑）。

下面用到的就是這里面最復(fù)雜的，但也是最萬(wàn)能的—— path。（其中的路徑指令 這里有詳細(xì)的解釋）

上圖的關(guān)鍵點(diǎn)在于，如何出現(xiàn)一個(gè)扇形，下面先給一段css代碼。

clip-path: path("M 46 0 A 46 46 0 1 1 2 60 L 46 46 Z");

上面的代碼，意思就是路徑以 x=46 y=0 為起點(diǎn)，順時(shí)針畫一個(gè)半徑為46，結(jié)束點(diǎn)為 x=2 y=60 橢圓弧曲線，最后向 x=46 y=46 的點(diǎn)畫一條直線，Z 是從當(dāng)前點(diǎn)到第一個(gè)點(diǎn)簡(jiǎn)單畫一條直線。最后出現(xiàn)的就是一個(gè)扇形。

簡(jiǎn)單提取下關(guān)鍵代碼：

/**
 * @param percent 百分比小數(shù)點(diǎn)
 * @param radius 圓的半徑
 */
  const arcX = Math.floor(Math.sin(Math.PI * 2 * percent) * radius + radius);
  const arcY = Math.floor(radius - Math.cos(Math.PI * 2 * percent) * radius);

這里又出現(xiàn)了萬(wàn)能的三角函數(shù)知識(shí)（之前遇到過），這樣子就可以計(jì)算得出弧線最后的落腳坐標(biāo)點(diǎn)。

 style={{ clipPath: `path("M ${radius} 0 A ${radius} ${radius}  0 1 1 ${arcX} ${arcY} L ${radius} ${radius} Z")` }}

最后這個(gè) style 放到需要一點(diǎn)一點(diǎn)顯示進(jìn)度的圖形上就好了。

最后

這個(gè)方法可以使用到之前的圓環(huán)圖上，但思路是完全不一樣的。

希望這個(gè)屬性給目前沒用到過的人混個(gè)眼熟，留個(gè)印象，日后當(dāng)你需要出現(xiàn)一些特別的形狀或效果時(shí)想起，然后可能會(huì)對(duì)你有幫助。

______________________________分割線______________________________

實(shí)戰(zhàn)測(cè)試：
下圖中，選中的狀態(tài)如何做？（關(guān)鍵就是下邊框的曲線是如何做的）