項目中使用了各種各樣進度條 這次主要記錄自己使用圓形的進度條心得 如下圖:分別對應著 老版本、新版本、現在 做東西之前 肯定先網上找找看,一搜索一大堆連接,當然也有一些UI框架帶這樣的控制項,我看了幾個,各種類和樣式繼承類,主要是和他們自己框架結合一起。僅僅為了一個控制項,那樣做 簡單問題複雜化。下麵是... ...
項目中使用了各種各樣進度條 這次主要記錄自己使用圓形的進度條心得
如下圖:分別對應著 老版本、新版本、現在
做東西之前 肯定先網上找找看,一搜索一大堆連接,當然也有一些UI框架帶這樣的控制項,我看了幾個,各種類和樣式繼承類,主要是和他們自己框架結合一起。僅僅為了一個控制項,那樣做 簡單問題複雜化。下麵是單獨介紹的一些有用鏈接.
https://www.cnblogs.com/lgmbk/p/5050367.html
https://www.cnblogs.com/dipwater/p/4011553.html
https://www.cnblogs.com/goxmpx/p/3741915.html
http://www.mamicode.com/info-detail-1272981.html
https://blog.csdn.net/u010875635/article/details/84197393
但是介於項目好多不能直接使用,因為有些功能不全,不能滿足要求。 比如起點的位置,有人喜歡在頂部開始,而有的從左邊開始,我還見過從右邊開始的,有的順時針,有的逆時針 ,所以得自己做些擴展。
剛開始要實現這些功能覺得挺費勁.
1、圓環被分割了
2、圓環圓角開始和結束,給人感覺要重新繪製
主要是當時不知道的太多,說一下難點處理方式,也是本篇文章重點至少對於我來說是這樣.
1、圓環被分割 主要是不清楚StrokeDashArray,這個屬性其實很多地方用過不知道Path也有,常見的是虛邊框矩形
新版中 只需要一個開始點和結束點就可以實現功能了,StrokeDashArray設置分割,StrokeThickness設置圓弧寬度
而不需要這樣搞 https://www.cnblogs.com/goxmpx/p/3741915.html
2、圓環圓角開始和結束這個問題 真耽誤2 3小時, 新版中是畫一個弧線, 而我要實現圓角,畫四個弧線,也就需要知道4個點,
把之前的代碼邏輯和思路全都換了,位置計算不准畫的弧不圓滑,
另外進度100%的時候圓角開始和圓角結束重合,即Path有重合就透明瞭, 平時CombinedGeometry合併用的是2個,
而這次有四個路徑 於是逐個屬性查找 ,最終PathGeometry上設置FillRule = FillRule.Nonzero, 搗鼓不少時間功能是滿足了 。
搞完之後覺得有些知識自己還是不太清楚,比如上面提到的合併之前是沒有這樣用過,於是就多瞭解一下Path,這一瞭解給我大驚一下, 明明一句代碼搞定的事情,我花費3小時,在那改寫代碼,瞬間一萬個後悔,為什麼不先看,為什麼不先看, 為什麼不先看!
這個鬼東西就是: StrokeStartLineCap="Round" 、StrokeEndLineCap="Round
設置這2個屬性後,之前代碼不用變化,於是把這2個屬性也公開了,整個系統可以只用一個控制項。
順便提一下:StrokeLineJoin屬性,也是改變連接處形狀,除了開始和結束。
最後希望有類似需求的人,能幫助到你,如果當時要是先知道這些能省時間。人一生時間有限,寫代碼的時間更有限。
模擬如下圖: