[XCODE] iPhone 線を描く（UIBezierPath）

今日はiPhoneで線を描く方法を勉強したので、ブログに書きたいと思います。

今回利用する技術は、「UIBezierPath」クラスです。参考資料は以下を参考にしました。

Drawing and Printing Guide for iOS

UIBezierPathクラスとは

Starting with iOS 3.2, you can use the UIBezierPath class to create vector-based paths. This class is an Objective-C wrapper for the path-related features in the Core Graphics framework. You can use the class to define simple shapes, such as ovals and rectangles, as well as complex complex shapes that incorporate multiple straight and curved line segments.

線を描く方法としてCore Graphicsフレームワークが存在します。UIBesierPathクラスは、CoreGraphicsフレームワークをラッピングしたクラスです。UIBezierpathkクラスを利用する事で、直線や曲線、四角や丸、複数の線や図形を用いた複雑な図形を、カンタンに作成することができるようです。

今回は、線を引いて五角形を作成してみました。描画イメージは以下です。

UIVezierPathの基本的な使い方

基本的な利用手順は以下です。自身でCGContextを作成しない場合には、以下処理をViewクラスのdrawRect:メソッドをオーバーライドして記述します。

１、UIVezierPathクラスのインスタンスを作成する

２、線の太さやスタイル、色などを設定する

３、moveToPoint:メソッドで、描画開始地点を指定する

４、直線や曲線を必要なだけ描画する

５、画面にレンダリングする

UIVezierPathで五角形を描いてみる

五角形を描いてみたソースコードは以下です。

- (void) drawRect : (CGRect)rect {
// create bezierPath instance
UIBezierPath *aPath = [UIBezierPathbezierPath];

// set render color and style
[[UIColorblackColor] setStroke];
aPath.lineWidth = 5;

// set start point
[aPath moveToPoint:CGPointMake(100, 0)];

//draw line
[aPath addLineToPoint:CGPointMake(200, 40)];
[aPath addLineToPoint:CGPointMake(160, 140)];
[aPath addLineToPoint:CGPointMake(40, 140)];
[aPath addLineToPoint:CGPointMake(0, 40)];

// close path so that successed to create pentagon.
[aPath closePath];

//rendering
[aPath stroke];
}

UIVezierPathクラスのインスタンスを作成後、線の色と太さを設定しています。その後、描画開始位置を指定して４本の線を設定します。そして、「closePath」メソッドを利用する事で最終地点と開始地点を線で結び、「stroke」メソッドで画面に描画しています。

最後に

iPhone開発で線を描くには、UIBezierPath、CoreGraphicsフレームワーク、OpenGL ESを利用する方法があります。一番簡単に線を描くには、UIBezierPathを利用する事でしょうか。利用する技術によりデフォルトの座標システムが異なるなど、ちょっと面倒な事もあるようです。

もっともっと描画については勉強しなくては♪(´ε｀ )