#25利用 UIBezierPath 實現圓環進度條
Published in
May 10, 2022
#5-10.HomeWork. (甜甜圈圖表 & 圓餅圖)
初步學習,先從圓環的進度條開始著手,如同一下圖示
首先主要定義幾個方面
- 定義半圓的(pi/180)每一度
- 定義半徑( radius )為多少? (決定 Size 的大小)
- 開始的角度(Degree)為多少? (決定起始的位置)
- 定義線寬(LineWidth)
Introduction to Class of UIBezierPath ( Creating a Bezier Path )
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 進行轉換成同型別
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 上渲染,使其非常快速。
程式碼
進階的變化