en

hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you!

zh

哦哦!您正在使用Internet Explorer 瀏覽器,它與我們的網頁標準並不相容,可能會導致畫面顯示不正常。
請改用 Mozilla Firefox 或者 Google Chrome 才能正常瀏覽本網站,謝謝!

7.05.2011

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];
}






4 則留言:

  1. 可以取得某個中文字型,然後畫在螢幕上嗎?

    回覆刪除
    回覆
    1. 沒試過耶,如果你可以把字型轉換成一堆路徑的話,那就可以畫出來囉

      刪除
    2. 週日試出來了,但只有標楷體的字型支援筆畫順序,其他字型在造字之時,都沒按照字型的筆畫順序造字。

      刪除