UIBezierPath 的基本使用方法

 

UIBezierPath 是根據 Core Graphic Framework 寫出的 Class ，能夠讓我們在 UIView 上畫出我們需要的圖形，圖形可以只是線條，也可以矩形、圓形或是不規則的形狀。本文利用畫出笑臉的範例教您如何使用 UIBezierPath 。

首先在 Project 中開啟一個 View-Based Template 專案，然後新增一個自定的 UIView subclass 並將它命名為 FaceDraw，接著要讓 ViewController 在一進入畫面時就立即調用此 View，還必須在 Interface Builder 中做設定，選擇 View 的 Identity inspector 屬性，將 Custom Class 由原本的 UIView 更改為剛剛建立的 UIView subclass FaceDraw，如下圖。

 

接下來就可以進行笑臉的繪製了，回到剛剛建立的 FaceDraw class 中，宣告並實做出這三個方法：繪製臉、繪製眼睛與繪製嘴巴，其程式碼分別如下。

- (void)drawHead {

    //使用 bezierPathWithOvalInRect 方法在一個設定的矩形方塊中畫出圓形，也就是笑臉的頭部
    UIBezierPath *pathHead = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(40, 120, 240, 240)];

    //設定畫出線條的寬度
    [pathHead setLineWidth:5];

    //畫出線條
    [pathHead stroke];
}
- (void)drawEyes {

    //此設定的 path 為畫出眼睛
    UIBezierPath *pathEyes = [UIBezierPath bezierPath];

    //畫出左眼
    [pathEyes addArcWithCenter:CGPointMake(115, 190) radius:10 startAngle:0 endAngle:2*M_PI clockwise:YES];

    //畫出右眼
    [pathEyes moveToPoint:CGPointMake(215, 190)];
    [pathEyes addArcWithCenter:CGPointMake(205, 190) radius:10 startAngle:0 endAngle:2*M_PI clockwise:YES];

    [pathEyes setLineWidth:5];
    [pathEyes stroke];
}

- (void)drawSmile {

    //此設定的 path 為畫出嘴巴
    UIBezierPath *pathSmile = [UIBezierPath bezierPath];

    //移動至座標點
    [pathSmile moveToPoint:CGPointMake(100, 280)];

    //此方法為利用貝茲曲線的方法畫出微笑的嘴巴
    [pathSmile addCurveToPoint:CGPointMake(220, 280) controlPoint1:CGPointMake(130, 330) controlPoint2:CGPointMake(190, 330)];

    //同樣設定線條寬度以及畫出線條
    [pathSmile setLineWidth:5];
    [pathSmile stroke];
}

最後我們只要在這個  FaceDraw class 中的程式進入點地方引用這些方法就可以繪製出笑臉圖案了。

- (void)drawRect:(CGRect)rect
{
    // Drawing code
    //設定所畫出的 Path 顏色
    [[UIColor blueColor] set];

    [self drawHead];
    [self drawEyes];
    [self drawSmile];
}