UIViewでCoreGraphicsを使って半円を描いていきたいと思います。
UIViewのサブクラス(HalfView)を作って、- (void)drawRect:(CGRect)rect
メソッドに描画の処理を書きます。
halfView.m
/*
半円をかく
*/
- (void)drawRect:(CGRect)rect {
//現在のコンテクストを取得
CGContextRef context = UIGraphicsGetCurrentContext();
//透明レイヤー開始
CGContextBeginTransparencyLayer(context, nil);
//パスの描画を開始
CGContextBeginPath(context);
//開始角度
float startAngle = -(90 * M_PI/180);
//円グラフの角度
float endAngle = startAngle + (M_PI * 2.0) * 0.5;
//円弧を描画する
CGContextMoveToPoint(context, 100, 100);
CGContextAddArc(context, 100, 100, 100.0f, startAngle, endAngle, 0);
CGContextClosePath(context);
UIColor *color = [UIColor blackColor];
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextDrawPath(context, kCGPathFill);
//透明レイヤー終了
CGContextEndTransparencyLayer(context);
}
Storyboadにて、幅200、高さ200のUIViewを作り、クラスをHalfViewにします。
実行結果
解説
//開始角度
float startAngle = -(90 * M_PI/180);
12時の方向から描画を始めたいので90度反時計回りに反転させる
円をパスで描画するメソッドは以下
void CGContextAddArc ( CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise );
引数の意味は以下のとおり
引数 | 意味 |
---|---|
c | グラフィックスコンテキスト |
x | 円弧の中心になるX座標 |
y | will |
radius | 円弧の半径 |
startAngle | X軸に対する円弧の開始角度(ラジアン) |
endAngle | X軸に対する円弧の終了角度(ラジアン) |
clockwise | 時計回りに円弧を作成する場合は1を、反時計回りに円弧を作成する場合は0を指定 |
なので以下の引数で実行すると
CGContextAddArc(context, 100, 100, 100.0f, startAngle, endAngle, 0);
contextというグラフィックスコンテキストで(x:100,y:100)の座標でstartAngleで開始、endAngleで終了する、反時計回りの円弧が描画される