読者です 読者をやめる 読者になる 読者になる

ほげほげ

プログラミング、英会話、ヨガ、料理などの備忘録など。

CGContextAddArcToPointの使い方

CGContextAddArcToPointを使うことによって、厳密な角度の計算をしなくても、
直線と直線の交わりをスムーズに円弧で描画することができる。
文章での説明が難しいからコードとイメージ図を載せてメモ。

結果

図のように、上の左右を角丸にしたタブもどきのようなUIImageが描画できる。
ピンクの文字は、下で示すコードの補足説明。
f:id:sekitaka_1214:20140303232136p:plain

コード

-(void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGFloat radius = 10.0f ;
    CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor) ;
    CGContextBeginPath(context);

    // 点Aに移動
    CGContextMoveToPoint( context, CGRectGetMinX(rect), CGRectGetMaxY(rect));

    // 直線ABと直線BCを指定した半径で、スムーズにつなぐ円弧パスを追加
    CGContextAddArcToPoint( context, CGRectGetMinX(rect), CGRectGetMinY(rect), // 点B
            CGRectGetMidX(rect), CGRectGetMinY( rect ),  // 点C
            radius );

    // 直線CDと直線DEを指定した半径で、スムーズにつなぐ円弧パスを追加
    CGContextAddArcToPoint( context, CGRectGetMaxX( rect ), CGRectGetMinY( rect ), // 点D
            CGRectGetMaxX( rect ), CGRectGetMidY( rect ),  // 点E
            radius );

    // 点Eから点Fまでの直線のパスを追加
    CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMaxY(rect)) ; // 点F

    CGContextClosePath( context );
    CGContextFillPath(context) ;
}