Question

I’m trying to figure out how to draw an arc in CoreGraphics. I understand which method calls to make and how to compute the angles in the following scenario.

----------
|        |
*--------*

When the points are both in the bottom of the rect. However when two points are in other locations, I don’t know how to calculate the correct angle.

---------*
|        |
*---------

See bottom portion of my image.

Ray Wenderlich has a great tutorial about creating arcs for only in the first mentioned point positions.

// sample code for creating arc for path from bottom of rect
CGMutablePathRef createArcPathFromBottomOfRect(CGRect rect, CGFloat arcHeight) {
  CGRect arcRect = CGRectMake(rect.origin.x, rect.origin.y + rect.size.height
    - arcHeight, rect.size.width, arcHeight);
  CGFloat arcRadius = (arcRect.size.height/2) + (pow(arcRect.size.width, 2) /
    (8 * arcRect.size.height));
  CGPoint arcCenter = CGPointMake(arcRect.origin.x + arc.size.width/2,
    arcRect.origin.y + arcRadius);
  CGFloat angle = acos(arcRect.size.width/ (2*arcRadius));
  CGFloat startAngle = radians(180) + angle;
  CGFloat endAngle = radians(360) - angle;
  CGMutablePathRef path = CGPathCreateMutable();
  CGPathAddArc(path, NULL, arcCenter.x, arcCenter.y, arcRadius, startAngle,
    endAngle, 0);
  return path;
}

How do I calculate the angle when in other situations as depicted at the bottom of my image?

Answer 1

I find an easier way to make arcs is to use:

void CGContextAddArcToPoint (
   CGContextRef c,
   CGFloat x1,
   CGFloat y1,
   CGFloat x2,
   CGFloat y2,
   CGFloat radius
);

If you look at this image from Ray Wenderlich’s site (https://www.raywenderlich.com/33330/core-graphics-tutorial-glossy-buttons), point (x1,y1) is your start point for the curve and point (x2,y2) is your end point. Then just specify the corner radius and voila! It looks like this may be an easier API to use for what you are looking to do.