7
8

More than 5 years have passed since last update.

【Objective-C】Core Graphicsで半円を描く

Posted at

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にします。
スクリーンショット 2015-11-23 14.28.45.png

実行結果

Simulator Screen Shot 2015.11.23 14.26.42.png

解説

    //開始角度
    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で終了する、反時計回りの円弧が描画される

7
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
8