IOS Quartz: CGPathAddArc and CGPathAddArcToPoint Functions

IOS Quartz: CGPathAddArc and CGPathAddArcToPoint Functions

The CGPathAddArc function defines a circle through the center and radius, and then uses two radians to determine an arc. Note that radians start with the X axis of the current coordinate environment.

Note that the coordinate system in iOS is opposite to the Y axis in the Quartz coordinate system. Therefore, when iOS UIView performs Quartz plotting, the Y axis has been converted from Scale to-1, therefore, the result of the last clockwise parameter of the CGPathAddArc function is exactly the opposite. That is to say, if the last parameter is set to YES, it should be clockwise according to the parameter definition, but the actual drawing result will be counter-clockwise!

For example, we set the start radian to 0, the end radian to 1.5 * PI (equal to 270 angle), and the last clockwise parameter to NO. Code:

CGPathAddArc (<# CGMutablePathRef path #>, <# const CGAffineTransform * m #>, <# CGFloat x #>, <# CGFloat y # >,< # CGFloat radius #>, <# CGFloat startAngle #>,< # CGFloat endAngle #>,< # bool clockwise #>)

-(Void) viewDidLoad

{

[Super viewDidLoad];

// Create CGContextRef

UIGraphicsBeginImageContext (self. view. bounds. size );

CGContextRef gc = UIGraphicsGetCurrentContext ();

// === Painting logic ===

// Create a Transform for Transferring coordinates, so that we do not need to calculate the coordinates according to the actual display.

CGAffineTransform transform = CGAffineTransformMakeTranslation (50, 50 );

// Create CGMutablePathRef

CGMutablePathRef path = CGPathCreateMutable ();

CGPathAddArc (path, & transform, 50, 50, 50, 0, 1.5 * M_PI, NO );

CGPathMoveToPoint (path, & transform, 50, 0 );

CGPathAddLineToPoint (path, & transform, 50, 50 );

CGPathAddLineToPoint (path, & transform, 100, 50 );

// Add CGMutablePathRef to the current Context

CGContextAddPath (gc, path );

[[UIColor grayColor] setFill];

[[UIColor blueColor] setStroke];

CGContextSetLineWidth (gc, 2 );

// Execute painting

CGContextDrawPath (gc, kCGPathFillStroke );

// Obtain the image from the Context and display it on the Interface

UIImage * img = UIGraphicsGetImageFromCurrentImageContext ();

UIGraphicsEndImageContext ();

UIImageView * imgView = [[UIImageView alloc] initWithImage: img];

[Self. view addSubview: imgView];

}

Output:

The arc is drawn clockwise.

If you change the CGPathAddArc function to the following:

// Although the clockwise parameter is YES, in the UIView of iOS, it is actually counter-clockwise. Therefore, only 1/4 is shown.

CGPathAddArc (path, & transform, 50, 50, 50, 0, 1.5 * M_PI, YES );

Although the clockwise parameter is YES, in iOS, it is actually counter-clockwise. Therefore, only 1/4 is shown. The result is:

While the CGContextAddArcToPoint function is another way to draw an arc, you can also refer to the SO answer. it draws a drawing by drawing two virtual lines, which are done by the current CGContextRef vertex and the two points defined by the CGContextAddArcToPoint function itself. The arc will be drawn from the current CGContextRef point to the intersection of the center circle and the second line. In some cases, the CGContextAddArcToPoint function is easier to use than CGPathAddArc. For example, the rounded rectangle.

// Create CGContextRef

UIGraphicsBeginImageContext (self. view. bounds. size );

CGContextRef gc = UIGraphicsGetCurrentContext ();

// === Painting logic ===

// Create a Transform for Transferring coordinates, so we do not need to follow the actual display for coordinate planning

CGAffineTransform transform = CGAffineTransformMakeTranslation (100,200 );

// Create CGMutablePathRef

CGMutablePathRef path = CGPathCreateMutable ();

// The radius is 30.

CGFloat radius = 10;

// The initial vertex is (0, 0)

CGPathMoveToPoint (path, & transform, 10, 0 );

// Draw a half rounded corner at two points in the upper right corner and lower right corner

CGPathAddArcToPoint (path, & transform, 100, 0,100,100, radius );

// Draw the other half rounded corner at the lower-right corner and lower-left corner.

CGPathAddArcToPoint (path, & transform, 100,100, 0,100, radius );

CGPathAddArcToPoint (path, & transform, 0,100, radius );

CGPathAddArcToPoint (path, & transform, 0, 0, 100,0, radius );

// Add CGMutablePathRef to the current Context

CGContextAddPath (gc, path );

[[UIColorgrayColor] setFill];

[[UIColorblueColor] setStroke];

CGContextSetLineWidth (gc, 2 );

// Perform painting

CGContextDrawPath (gc, kCGPathFillStroke );

// Obtain the image from the Context and display it on the Interface

UIImage * img = UIGraphicsGetImageFromCurrentImageContext ();

UIGraphicsEndImageContext ();

UIImageView * imgView = [[UIImageViewalloc] initWithImage: img];

[Self. viewaddSubview: imgView];

For example: