#25利用 UIBezierPath 實現圓環進度條

#5-10.HomeWork. (甜甜圈圖表 & 圓餅圖)

初步學習，先從圓環的進度條開始著手，如同一下圖示

首先主要定義幾個方面

1. 定義半圓的(pi/180)每一度
2. 定義半徑( radius )為多少? （決定 Size 的大小）
3. 開始的角度(Degree)為多少? (決定起始的位置)
4. 定義線寬(LineWidth)

Introduction to Class of UIBezierPath ( Creating a Bezier Path )

Apple Developer Documentation

init(ovalIn: CGRect)
Creates and returns a new Be?zier path object with an inscribed oval path in the specified rectangle.

Introduction to Structure of CGRect ( Creating Rectangle Values )

因為前面定義的直都是 CGFloat 值，可以透過 CGRect 進行轉換成同型別

Apple Developer Documentation

init(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)
Creates a rectangle with coordinates and dimensions specified as CGFloat values.

合併使用就如同下面

init(ovalIn: CGRect(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat))

CAShapeLayer 特性

CAShapeLAyer 可以被觸碰和填充，並且他們的線條屬性可以被進行調節。
CAShapeLAyer 還具有許多動畫的特性，這使開發人員人員可以創建吸引人的動畫效果。
最重要的是 CAShapeLayer 在完全的在 GPU 上渲染，使其非常快速。

程式碼

進階的變化

使用亂數定義圈裡面的顏色