專案中需要乙個圓形進度條，本著能省則省的原則，先去elementui上看了下，傻眼了，不一樣，ui直接否定了這個辦法。
這個沒啥難點，cx,cy,r分別表示圓心(x,y)和半徑r,stroke-width是圓的邊，stroke表示邊的顏色，fill表示整個圓的填充顏色。其實就是兩個同心圓，裡面的圓的邊帶有一定的寬度，展現出來效果就是上面這樣了。
下面開始難點的，就是進度不是100%時，只是一段圓弧的情況。
上面的path就是畫弧線的指令，d="m 40 8 a 32 32, 0, 0, 1, 40,72",d="m 起點x 起點y a 圓心x 圓心y, 0， 0(畫小弧)， 1，終點x, 終點y「。加上文字，text標籤，之前不知道，以為只能有乙個text,後來發現可以有無數個，前提是裝得下，字型的樣式，就是css中，font的各個屬性直接新增在標籤上。
下面附上我用vue寫的乙個元件，裡面外層圓大小只計算了80，60兩種，專案中是夠用了。
溜了溜了，設計要來找我了
Unity使用Mesh元件畫圓環
呼叫 畫圓環 依附物件 中心點 分割段數 內徑 厚度，向外擴的寬度 材質 public static void drawring gameobject gameobject,vector3 center,int segments,float innerradius,float thickness,m...
UIView畫圓 切圓環
對於一些圓，或者圓環我們可以用uiview進行切出來。案例 原圖 效果圖 主要 如下 設定圓環 self.pointview.layer.cornerradius 11 設定圓形的程度 self.pointview.layer.maskstobounds yes 設定是否切圓 self.pointv...
SVG做圓環進度
我們要實現的效果 是不是有點感覺。哈哈 動態效果是用css3來實現的，至於進度則是用js控制stroke dasharray屬性實現的。如下 首先看下html結構 1143 1566加油開始99 濾鏡效果 對於svg不熟悉的，先看下svg基本教程 接下來看下css樣式 zh rt main zh r...