今回はUIBezierPathを使用した、線の描画方法を紹介します。
UIBezierPathは描画用のクラスです。Bezierは“ベジェ”と読みます。ベジェ曲線などといった単語は聞いたことがある人も多いかと思います。このクラスでは、直線や曲線に加え円を描画することも可能です。
まず、線を描画するViewを準備します。UIViewを継承したクラスを作成してください。
作成すると中にコメントアウトされたdrawRectというメソッドが既に用意されています。ここにUIBezierPathを使用し描画を行う処理を記述します。描画処理が複雑で長くなる場合は、別メソッドに切り出した方がよいかと思いますが、今回はdrawRect内に直接記述します。
描画領域はデフォルトでは背景色が黒に設定されているため、変更したい場合はinitWithFrameメソッド内で背景色の指定を行ってください。
以下では背景色を透明に設定しています。
-(id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if(self){
self.backgroundColor = [UIColor clearColor];
}
return self;
}
-(void)drawRect:(CGRect)rect {
}
UIBezierPathを使って線を描画する場合、必要な処理は主に以下の6つです。
- UIBezierPathのインスタンスの生成
- 描画の開始位置の設定
- 線の幅の設定
- 線の色の設定
- 描画の終了位置の設定
- 描画処理
-(void)drawRect:(CGRect)rect {
// UIBezierPathのインスタンス生成
UIBezierPath *line = [UIBezierPath bezierPath];
// 描画の開始位置の設定
[line moveToPoint:CGPointMake(100, 100)];
// 線の幅の設定
[line setLineWidth:5];
// 線の色の設定
[[UIColor redColor] set];
// 描画の終了位置の設定
[line addLineToPoint:CGPointMake(200, 200)];
// 描画処理
[line stroke];
}
これでView内の(100, 100)の座標から(200, 200)を結ぶ赤色の直線が描画されます。
ちなみに、座標を変数などで持っておき何かのアクションのタイミングで再描画を行いたい場合は、呼び出し元でViewのインスタンスに対してsetNeedsDisplayを呼んであげることでViewの再描画を行うことができます。