Work(4-7)利用 UIBezierPath 實現圓環進度條，甜甜圈圖表 & 圓餅圖

再不怕堅持自己 做你沒做對的決定

圓環進度條(circular progress ring)

圓環進度條為外層圓內層圓

直接實作好像太無聊了來進入提問時間😂！！

提問：彼得潘的作業總共有243篇Dora辛苦完成了50篇，那Dora完成了幾％（四捨五入）？

50/243*100四捨五入為21％

對！我卡最久的竟然是小數點啊 笑

好不容易除好竟然一直弄不掉小數點所以上網問了估狗怎樣四捨五入程式碼完成如下 👏

let percentage: CGFloat = CGFloat(ceil(50/243*100))

然後就順利完成圓餅圖了

還有重要部分的圓環進度條的起點角度跟終點角度

startAngle起點角度為270

endAngle終點角度為270+ 360 * percentage / 1002

調整線端點形狀

我們可以設定 CAShapeLayer 的 lineCap，lineCap 有 butt，round，square 三種樣式，預設是 butt。（圖示由左至右為butt，round，square）

甜甜圈圖表(donut chart)

甜甜圈圖表 是繪製圓形的線條，因此它設定 CAShapeLayer 的 strokeColor & lineWidth。

提問：照圖片做出甜甜圈圖表看出Dora在沒寫程式之外的時間在哪裡浪費了時間？

分別是YouTube 30%、極速領域22%、臉書19%、IG 16%、傳說對決6%、LINE 3%、Safari 2%、Trello 1%、Medium1%

Medium跟Trello的部分是我睡前看明天要做啥作業苦惱的睡前讀物 😂

圓餅圖(pie chart)

圓餅圖則是填滿顏色，因此改成設定 CAShapeLayer 的 fillColor。

對我想不到梗了 😏直接完成結束

完成 👏