For a recent project, I needed to have the ability for a user to draw an angle dimension on top of a picture. They can drag the 3 points and the dimension lines should update in real time. I needed to draw two lines and an arc between the two lines. Drawing the two lines is simple, but drawing the arc took a little bit of thinking.

At first I was calculating the inscribed angle using the law of cosines, then trying to determine the starting angle. The end angle would be the starting angle + the inscribed angle. Big mistake. This is complicated and has too many edge cases for each quadrant a starting or ending point is located in. Then I tried the handy atan2 function, which previously proved very useful in game design, and worked perfectly. In this case, imagine a line of 3 points, where each point can be moved and the angle between the two segments are shown.

Below is my drawing code to achieve this:

- (void)drawRect:(CGRect)rect { [super drawRect:rect]; CGFloat lx = self.leftEndpoint.center.x;// first point along edge CGFloat ly = self.leftEndpoint.center.y; CGFloat mx = self.middleEndpoint.center.x;// middle pt CGFloat my = self.middleEndpoint.center.y; CGFloat rx = self.rightEndpoint.center.x;// other point along edge CGFloat ry = self.rightEndpoint.center.y; CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetStrokeColorWithColor(context, [self.lineColor CGColor]); // thickness CGContextSetLineWidth(context, 2.0f); // starting pt CGContextMoveToPoint(context, lx, ly); // middle pt CGContextAddLineToPoint(context, mx, my); // ending pt CGContextAddLineToPoint(context, rx, ry); // draw path, make sure to call this here to reset the stoke path points CGContextStrokePath(context); // angle arc // distances CGFloat lmDist = sqrt(pow(lx - mx, 2) + pow(ly - my, 2)); CGFloat mrDist = sqrt(pow(rx - mx, 2) + pow(ry - my, 2)); // angles CGFloat startAngle = atan2(ry - my, rx - mx);// right to middle CGFloat endAngle = atan2(ly - my, lx - mx);// left to middle CGFloat radius = 0.20 * fmin(lmDist, mrDist);// 20% of min distance along lines int clockwise = YES; CGContextAddArc(context, self.middleEndpoint.center.x, self.middleEndpoint.center.y, radius, startAngle, endAngle, clockwise); // draw arc path CGContextStrokePath(context); }

Here’s a screenshot from the prototype app:

(Ignore the background, it’s just something nice to look at while working)