Question

I have this code so far:

CGPoint midLeft = CGPointMake(0, additionalHeight);
    CGPoint bottomCenter = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height);
    CGPoint midRight = CGPointMake(self.bounds.size.width, additionalHeight);
    CGPoint topRight = CGPointMake(self.bounds.size.width, 0);
    CGPoint topLeft = CGPointMake(0, 0);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    

    CGContextMoveToPoint(context, midLeft.x, midLeft.y);
    CGContextAddLineToPoint(context, midRight.x, midRight.y);
    CGContextAddLineToPoint(context, topRight.x, topRight.y);
    CGContextAddLineToPoint(context, topLeft.x, topLeft.y);

    CGContextClosePath(context);

Right now, it just draws me a rectangle, but I want it to draw me an arc, which reaches down to bottomCenter, like the shape at the top of this image:

I’ve tried CGContextAddArc and AddArcToPoint, and followed tutorials, but I can’t figure out how to draw this kind of arc. Any help is appreciated.

Answer 1

Check out this blog post, it covers arcs and paths. The result is almost the same as what you’re aiming for.

My recommendation is to do his whole Core Graphics 101 series, it’s really good.

You could also use UIBezierPath instead. With addQuadCurveToPoint:controlPoint: you can easily create a arc-like shape.

I havent tested the code below, but it should create something like this:

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 10)];
[path addQuadCurveToPoint:CGPointMake(200, 10) controlPoint:CGPointMake(100, 5)];
[path addLineToPoint:CGPointMake(200, 0)];
[path addLineToPoint:CGPointMake(0, 0)];
[path closePath];

CGContextAddPath(context, path.CGPath);
[[UIColor redColor] set];
CGContextFillPath(context);

Hope this is to any help.