Draw an arc clockwise in iOS results in an overclock arc

Question

I use the following code to draw an arc in the bottom half of a circle.

According to Apple's documentation:

This method creates an open subpath. The created arc lies on the perimeter of the specified circle. When drawing the coordinate systems by default, the starting and ending angles are based on the unit circle shown in Figure 1. For example, setting the starting angle is 0 radians, the ending angle π radians, and setting clockwise. The YES parameter takes the lower half of the circle. However, setting the same starting and ending angles, but setting clockwise the parameter set to NO, draws the upper half of the circle.

I wrote

std::complex<double> start1( std::polar(190.0,0.0) ); CGPoint targetStart1 = CGPointMake(start1.real() + 342.0, start1.imag() + 220.); CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, targetStart1.x, targetStart1.y); CGPathAddArc(path, NULL, 342.0, 220.0, 190, 0.0, PI_180, YES ); CGContextAddPath(context, path); CGContextSetLineWidth( context, 15.0 ); // set the color for the stroked circle CGContextSetStrokeColorWithColor( context, [UIColor greenColor].CGColor); CGContextStrokePath(context); CGPathRelease(path); 

However, an arc is drawn in the upper half of the circle (see green ring). I am wondering if I accidentally flipped the coordination system somewhere in the code, but I don’t know which team I should look for.

Thanks for the help ur.

Answer 1

According to a Vinzzz comment: for some non-transparent reason, Apple turned the window manager coordinate system between OS X and iOS. OS X uses a graphical chart of paper with a beginning in the lower left corner, and a positive y up. UIKit uses an English reading order with a start in the upper left and a positive y going down.

Core Graphics retains the OS X approach; UIKit simply presents its products upside down. Drop the body if you really want to convince yourself.

The standard solution is to convert and scale the current transformation matrix as the first two steps in any drawRect: effectively moving the beginning back to the bottom left corner for this view and flipping the y coordinate axis.