There are three concepts in Core Graphics: CGContext, CALayer, UIView

  1. CGContext is a brush that sets the state parameters and path of the painting, such as color, line width, bold, etc. A path is a path that records the shapes drawn, including circles, rectangles, rounded rectangles, irregular shapes, line segments, arcs, etc
  2. CALayer is a canvas on which ContextRef draws graphics
  3. UIView is a picture frame, which does not have the function of display itself. It displays through CALayer and is also responsible for the interaction with the user

CGContext: CGContextRef(graphics context), PATH (path) and render

  1. CGContextRef is called graphics Context and can be simply thought of as a canvas

  2. Path is a graph, also called path, because path records the circle, rectangle, line segment and other graphs composed of line segment groups that you draw on CGcontextRef. In human language, it is conceived in your mind without starting to draw.

  3. Rendering is to assign graph (PATH) to state parameters. In human language, it is to draw a well-conceived picture on CGcontextRef.

    / / opening and closing the graphics context must be one to one correspondence UIGraphicsBeginImageContext (CGSizeMake (100, 70)); / / open the picture type of context CGcontextRef CTX = UIGraphicsGetCurrentContext (); CGContextMoveToPoint(CTX, 0, 50); // Create path, concatenate path, add path to context, (cut or render as required) CGContextMoveToPoint(CTX, 0, 50) CGContextAddLineToPoint(ctx, 200, 50); CGContextStrokePath(ctx); // Stroke render CGContextFillPath(CTX); / / fill rendering UIImage * image = UIGraphicsGetImageFromCurrentImageContext (); / / object images captured by the image type of context UIGraphicsEndImageContext (); // Turn off the graphics context for the image typeCopy the code

Third, the sample

You can add images to UIImageView, and there’s a bunch of handy modes in contentMode.

  1. Can fill the UIImageView UIViewContentModeScaleToFill, but may result in image distortion.
  2. UIViewContentModeScaleAspectFit will guarantee proportional constant images, but there will be a blank.
  3. UIViewContentModeScaleAspectFill will only show some pictures and images ratio unchanged.
  4. UIViewContentModeCenter centers the entire image, keeping the scale constant

These modes are either filled up or left to right, can we use the Core Graphics method to not fill up or left to right, so just to show you, the blue is the scope of the UIImageView, and now it’s the original image

Then there is the effect after processing, setting the surroundings to be opaque

Then paint the canvas orange and look at it

- (void)test2 { UIImage *image = [UIImage imageNamed:@"Image-3"]; CGFloat x = image. The size. Width * 0.5, y = image. The size, height * 0.5, width = image. The size, width, height = image. The size, height and radius = 100; / / open the picture type of context UIGraphicsBeginImageContextWithOptions (CGSizeMake (image. The size. Width * 2, image, the size, height * 2), NO, 1); / / to dye the canvas CGContextRef CTX = UIGraphicsGetCurrentContext (); CGContextAddRect(ctx, CGRectMake(0, 0, width*2, height*2)); // [[UIColor clearColor] setFill]; // Transparent color [[UIColor orangeColor] setFill]; // orange CGContextFillPath(CTX); CGContextAddRoundRect(CTX, CGRectMake(x, y, width, height), 0.1*MAX(width, height)); CGContextClip(ctx); [image drawAtPoint:CGPointMake(x, y)]; / / to remove UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext (); / / close the image type of the graphics context UIGraphicsEndImageContext (); / / test self. ImageView. Image = newImage; } void CGContextAddRoundRect(CGContextRef context,CGRect rect,CGFloat radius){ float x1=rect.origin.x; float y1=rect.origin.y; float x2=x1+rect.size.width; float y2=y1; float x3=x2; float y3=y1+rect.size.height; float x4=x1; float y4=y3; CGContextMoveToPoint(context, x1, y1+radius); CGContextAddArcToPoint(context, x1, y1, x1+radius, y1, radius); CGContextAddArcToPoint(context, x2, y2, x2, y2+radius, radius); CGContextAddArcToPoint(context, x3, y3, x3-radius, y3, radius); CGContextAddArcToPoint(context, x4, y4, x4, y4-radius, radius); CGContextClosePath(context); }Copy the code