1. 程式人生 > >iOS開發-貝塞爾曲線UIBezierPath+進度環

iOS開發-貝塞爾曲線UIBezierPath+進度環

使用CAShapeLayer與UIBezierPath可以實現不在view的drawRect方法中就畫出一些想要的圖形 。

貝塞爾曲線只是規劃了一個Layer的路徑,而不能真正的展示出來,所以要和CAShapeLayer搭配使用。

//讓貝塞爾曲線與CAShapeLayer產生聯絡

    self.shapeLayer.path = circlePath.CGPath;

1:UIBezierPath: UIBezierPath是在UIKit 中的一個類,繼承於NSObject,可以建立基於向量的路徑.此類是CoreGraphics框架關於path的一個OC封裝。使用此類可以定義常見的圓形、多邊形等形狀 。我們使用直線、弧(arc)來建立複雜的曲線形狀。每一個直線段或者曲線段的結束的地方是下一個的開始的地方。每一個連線的直線或者曲線段的集合成為subpath。一個UIBezierPath物件定義一個完整的路徑包括一個或者多個subpaths。

2:CAShapeLayer: CAShapeLayer顧名思義,繼承於CALayer。 每個CAShapeLayer物件都代表著將要被渲染到螢幕上的一個任意的形狀(shape)。具體的形狀由其path(型別為CGPathRef)屬性指定。 普通的CALayer是矩形,所以需要frame屬性。CAShapeLayer初始化時也需要指定frame值,但 它本身沒有形狀,它的形狀來源於其屬性path 。CAShapeLayer有不同於CALayer的屬性,它從CALayer繼承而來的屬性在繪製時是不起作用的。

圓環進度指示器

要畫一個貝塞爾曲線要有幾個基本的要素:

起始角度、結束角度、半徑、是否按照順時針方向

第一步建立一個圓環(UIBezierPath+ CAShapeLayer

第二步新增漸變顏色(CAGradientLayer

第三步新增進度末尾的小紅點(獲取圓環終點位置的座標方法 (UIBezierPath終點位置)

1、確定所在的角度是多少

2、確定象限

3、後通正弦餘弦函式來確定xy

4、最終得出在整個layer中的位置

第四步進一步包裝