iOS BeizierPath 繪圖

iOS BeizierPath 繪圖

    最近工做,由於是一款理財的產品,因此進度條改爲圓,固然也參考了幾篇優秀的博文,稍後一一羅列,下面簡單介紹:使用UIBezierPath類能夠建立基於矢量的路徑，這個類在UIKit中。此類是Core Graphics框架關於path的一個封裝。使用此類能夠定義簡單的形狀，如橢圓或者矩形，或者有多個直線和曲線段組成的形狀。

Bezier Path 基礎                                            

    UIBezierPath對象是CGPathRef數據類型的封裝。path若是是基於矢量形狀的，都用直線和曲線段去建立。                  咱們使用直線段去建立矩形和多邊形，使用曲線段去建立弧（arc），圓或者其餘複雜的曲線形狀。每一段都包括一個或者多個點，繪圖命令定義如何去詮釋這些點。每個直線段或者曲線段的結束的地方是下一個的開始的地方。每個鏈接的直線或者曲線段的集 合成爲subpath。一個UIBezierPath對象定義一個完整的路徑包括一個或者多個subpaths。                               

建立和使用一個path對象的過程是分開的。建立path是第一步，包含一下步驟：                      

（1）建立一個Bezier path對象。                      

（2）使用方法moveToPoint:去設置初始線段的起點。                      

（3）添加line或者curve去定義一個或者多個subpaths。                      

（4）改變UIBezierPath對象跟繪圖相關的屬性。  

    當建立path，咱們應該管理path上面的點相對於原點（0，0），這樣咱們在隨後就能夠很容易的移動path了。爲了繪製path對象， 咱們要用到stroke和fill方法。這些方法在current graphic context下渲染path的line和curve段。  

   下面咱們用貝塞爾曲線畫一個多邊形

-(void)drawRect:(CGRect)rect
{
    
    UIColor *color = [UIColor yellowColor];
    [color set];  //設置線條顏色
    
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    
    aPath.lineWidth = 10.0;//設置線條的粗細
    
    aPath.lineCapStyle = kCGLineCapRound;  //線條拐角
    aPath.lineJoinStyle = kCGLineCapRound;  //終點處理
    
    // 設置多邊形最開始的點
    [aPath moveToPoint:CGPointMake(100.0, 0.0)];
    
    // 畫相應的線條
    [aPath addLineToPoint:CGPointMake(200.0, 40.0)];
    [aPath addLineToPoint:CGPointMake(160, 140)];
    [aPath addLineToPoint:CGPointMake(40.0, 140)];
    [aPath addLineToPoint:CGPointMake(0.0, 40.0)];
    [aPath closePath]; //第五條線經過調用closePath方法獲得的
    
    [aPath stroke]; //Draws line 根據座標點連線  //填充線條
   // [aPath fill];//圖形內部填充
    
}

              

繪製圓

用到這個方法                      

+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect ;

當傳入的 rect 是一個正方形時,則繪製一個圓,若是是矩形時,則是橢圓

建立一段弧的方法

+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL )clockwise;

參數介紹:

center:圓弧的中心

radius:半徑

startAngle:開始角度

endAngle:結束角度

clockwise:是否順時針方向

畫一段弧形的相關代碼

1. #import "DrawPolygonView.h"
   
   #define pi 3.14159265359
   #define   DEGREES_TO_RADIANS(degrees)  ((pi * degrees)/ 180)
   
   @implementation DrawPolygonView
   
   -(void)drawRect:(CGRect)rect
   {
   
       UIColor *color = [UIColor redColor];
       [color set];  //設置線條顏色
   
       UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
                                                            radius:75
                                                        startAngle:0
                                                          endAngle:DEGREES_TO_RADIANS(135)
                                                         clockwise:YES];
   
       aPath.lineWidth = 5.0;
       aPath.lineCapStyle = kCGLineCapRound;  //線條拐角
       aPath.lineJoinStyle = kCGLineCapRound;  //終點處理
       [aPath stroke];
   
   }

一樣,用上述方法能夠繪製圓,可是這個方法有弊端,會大量佔用 cpu, 致使效率不佳,而咱們能夠用下面這個方法繪製出高性能的圓,主要是不佔用系統 cpu, 那麼咱們在哪裏繪製,實際上是用 GPU處理,這樣會大大提升運行速度,固然最主要的是不佔用 cpu,至於爲何會這樣?首先下面介紹的是用CAShapeLayer和貝塞爾曲線繪製.

CAShapeLayer和DrawRect的比較
DrawRect：DrawRect屬於CoreGraphic框架，佔用CPU，消耗性能大
CAShapeLayer：CAShapeLayer屬於CoreAnimation框架，經過GPU來渲染圖形，節省性能。動畫渲染直接提交給手機GPU，不消耗內存

貝塞爾曲線與CAShapeLayer的關係
1，CAShapeLayer中shape表明形狀的意思，因此須要形狀才能生效
2，貝塞爾曲線能夠建立基於矢量的路徑
3，貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進行渲染。路徑會閉環，因此繪製出了Shape
4，用於CAShapeLayer的貝塞爾曲線做爲Path，其path是一個首尾相接的閉環的曲線，即便該貝塞爾曲線不是一個閉環的曲線

用 CAShapeLayer 和 UIBeizierPath 繪製圓或者圓弧

-(void)drawCircleOnView
{
    //建立出CAShapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//設置shapeLayer的尺寸和位置
    self.shapeLayer.position = self.view.center;
    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充顏色爲ClearColor
    
    //設置線條的寬度和顏色
    self.shapeLayer.lineWidth = 1.0f;
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    //建立出圓形貝塞爾曲線
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    
    //讓貝塞爾曲線與CAShapeLayer產生聯繫
    self.shapeLayer.path = circlePath.CGPath;
    
    //添加並顯示
    [self.view.layer addSublayer:self.shapeLayer];
}

若是要作一個圓形進度條,那麼咱們須要對這兩個參數進行設置

strokeEnd和strokeStart
Stroke:用筆畫的意思
在這裏就是起始筆和結束筆的位置
Stroke爲1的話就是一整圈

而後將其加入到 NSTimer 中作一些相應的處理就能夠實現動態繪製圓了,你們趕忙試試吧.

參考博客地址:http://blog.it985.com/7654.html