preface

The last article briefly introduced the concept of Core Graphics. This article will introduce the use of Core Graphics in real development

Graphics rendering

Line segment

The rect - (void) drawRect: (CGRect) {/ / get the context CGContextRef CTX = UIGraphicsGetCurrentContext (); CGContextSetLineWidth(CTX, 2); // Set the starting point CGContextMoveToPoint(CTX, 10, 10); // CGContextAddLineToPoint(CTX, 250, 250); // Set the color [[UIColor redColor]set]; / / rendering CGContextStrokePath (CTX); }Copy the code

rectangular

- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(CTX, 2); // Rectangle CGContextAddRect(CTX, CGRectMake(0, 0, 200, 200)); // Set the color [[UIColor redColor]set]; / / rendering CGContextStrokePath (CTX); }Copy the code

round

- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(CTX, 2); /* Parameter 1: target context parameter 2: center x parameter 3: center Y parameter 4: Radius parameter 5: start radian parameter 6: end radian parameter 7: draw direction, NO: clockwise; YES: counterclockwise */ // circle CGContextAddArc(CTX, 40, 200, 40, 0, 2*M_PI, YES); // Set the color [[UIColor redColor]set]; / / rendering CGContextStrokePath (CTX); }Copy the code

Bessel curve

Second order Bessel

- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(CTX, 2); // dashed line CGContextSetLineDash(CTX, 0, (CGFloat[]){10,5}, 2); // CGContextMoveToPoint(CTX, 100, 100); /* Parameter 1: target context parameter 2: control point x parameter 3: control point Y parameter 4: end point x parameter 5: End point y * / / / second order Bessel CGContextAddQuadCurveToPoint (CTX, 300, 300, 100, 500); // Set the color [[UIColor redColor]set]; / / rendering CGContextStrokePath (CTX); }Copy the code

Third order Bessel

- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(CTX, 2); /* Parameter 1: target context parameter 2: control point 1 x coordinate parameter 3: control point 1 y coordinate parameter 4: control point 2 x coordinate parameter 5: Control point 2 y coordinate parameter 6: end point x coordinate parameter 7: */ / CGContextAddCurveToPoint(CTX, 40, 200, 300, 300, 100, 500); // Set the color [[UIColor redColor]set]; / / rendering CGContextStrokePath (CTX); }Copy the code

The image processing

Image processing is no longer handled in the drawRect: method. Instead, CGBitmapContextCreate() is called to create an image context and output UIImage objects after processing this context to achieve the desired effect

grayscale

- (UIImage *) grayImage: UIImage *) image {/ / create gray color space object CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray (); /* Parameter 1: address pointing to the drawing memory to render parameter 2: height parameter 3: width parameter 4: number of bits per component of pixels in memory parameter 5: number of bits per line in memory parameter 6: color space used by context parameter 7: CGContextRef Context = CGBitmapContextCreate(nil, image.size. Width, image.size. Height, 8, 0, image.size. colorSpace, kCGImageAlphaNone); CGColorSpaceRelease(colorSpace); if (! context) { return nil; } // Draw CGContextDrawImage(context, CGRectMake(0, 0, image.sie.width, image.sie.height), image.cgImage); / / create a UIImage object UIImage * grayImage = [UIImage imageWithCGImage: CGBitmapContextCreateImage (context)]; // Release the context CGContextRelease(context); return grayImage; }Copy the code

binarization

- (UIImage *)binarizationImage:(UIImage *)image { int width = image.size.width; int height = image.size.height; Uint32_t *pixels = (uint32_t *)malloc(width * height * sizeof)); CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); // Pixels (pixels, 0, width*height * sizeof(uint32)); /* Parameter 1: address pointing to the drawing memory to render parameter 2: height parameter 3: width parameter 4: number of bits per component of pixels in memory parameter 5: number of bits per line in memory parameter 6: color space used by context parameter 7: CGContextRef Context = CGBitmapContextCreate(Pixels, width, height, 8, width*sizeof(uint32_t), colorSpace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedLast); CGContextDrawImage(context, CGRectMake(0, 0, width, height), image.CGImage); int tt =1; CGFloat intensity; int bw; // for (int y = 0; y <height; y++) { for (int x =0; x <width; x ++) { uint8_t *rgbaPixel = (uint8_t *)&pixels[y*width+x]; intensity = (rgbaPixel[tt] + rgbaPixel[tt + 1] + rgbaPixel[tt + 2]) / 3. / 255.; Bw = intensity > 0.45? 255:0; rgbaPixel[tt] = bw; rgbaPixel[tt + 1] = bw; rgbaPixel[tt + 2] = bw; }} / / through the context to create a CGImageRef CGImageRef imageRef = CGBitmapContextCreateImage (context); // Release CGContextRelease(context); // The color object releases CGColorSpaceRelease(colorSpace); // Release array free(pixels); / / create UIImage through CGImage UIImage * resImage = [UIImage imageWithCGImage: imageRef]; // Release CGImage CGImageRelease(imageRef); return resImage; }Copy the code

Image segmentation

- (UIImage *)CutImageWithImage:(UIImage *)image withRect:(CGRect)rect {/* Parameter 1: CGImage type parameter 2: To cut the CGRect * / CGImageRef cutImage = CGImageCreateWithImageInRect (image. CGImage, the rect); / / cut out to be the picture into a UIImage UIImage * result = [UIImage imageWithCGImage: cutImage]; return result; }Copy the code

Image stitching

- (UIImage *)spliceImage:(UIImage *)image1 toImage:(UIImage *)image2 { CGSize size = CGSizeMake(image1.size.width, image1.size.height); / / create a bitmap based context (context), and set it to the current context (context) UIGraphicsBeginImageContext (size); // Draw image2 [image2 drawInRect:CGRectMake(4.5, 6, 77, 77)]; // Draw image1 [image1 drawInRect:CGRectMake(0, 0, image1.size.width, image1.size.height)]; / / get stitching good graphics UIImage * resultingImage = UIGraphicsGetImageFromCurrentImageContext (); / / close the graphics context UIGraphicsEndImageContext (); return resultingImage; }Copy the code

Page screenshots

- (UIImage *)captureView:(UIImageView *)view {/* Parameter 1: drawing size parameter 2: transparency switch, if the image is not transparent at all, set to YES to optimize bitmap storage. Parameter 3: When set to 0, the system automatically sets the correct scale */ // create a bitmap-based context and set it to the current context. UIGraphicsBeginImageContextWithOptions (view. Frame. The size, NO, 0.0); / / render the view. The layer to the current context [the layer renderInContext: UIGraphicsGetCurrentContext ()]; / / by the context for UIImage UIImage * image = UIGraphicsGetImageFromCurrentImageContext (); / / close the graphics context UIGraphicsEndImageContext (); return image; }Copy the code

In actual combat

Custom shape for paging controller

An irregular tabar is to be customized in the project, as shown. The method found online is iOS 13 or below, iOS 13 or above will not work. If you look at the demand, it’s concave down instead of convex up, so the current method can solve the demand.

Ideas:

1. First customize a view, then draw the shape we need, and set the mask through the mask property.

2. After completion, take a screenshot to generate a picture and set this picture as the background picture of Tabar

// .h #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN @interface BaseTabBar : UITabBar @end NS_ASSUME_NONNULL_END // .m - (void)setCurveBG { UIView *back = [UIView new]; { back.backgroundColor = YELLOW_COLOR; [self setShadowImage:[UIImage new]]; back.frame = self.bounds; UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(ViewWidth(back) /5, 0.f)]; [path addCurveToPoint:CGPointMake(ViewWidth(back)/2, 35) controlPoint1:CGPointMake(ViewWidth(back) *3/7, 0) controlPoint2:CGPointMake(ViewWidth(back)/2-35, 35)]; [path addCurveToPoint:CGPointMake(ViewWidth(back) *4/5, 0.f) controlPoint1:CGPointMake(ViewWidth(back)/2+35, 35) controlPoint2:CGPointMake(ViewWidth(back) *4/7, 0)]; [path closePath]; UIBezierPath *path2 = [UIBezierPath bezierPath]; [path2 moveToPoint:CGPointMake(0.f, 0.f)]; [path2 addLineToPoint:CGPointMake(ViewWidth(back), 0.f)]; [path2 addLineToPoint:CGPointMake(ViewWidth(back), ViewHeight(back))]; [path2 addLineToPoint:CGPointMake(0.f, ViewHeight(back))]; [path2 closePath]; // add the curve part path to the rectangle part [path2 appendPath:path]; CAShapeLayer *shapLayer = [CAShapeLayer layer]; shapLayer.path = path2.CGPath; back.layer.mask = shapLayer; self.translucent = YES; UIImage *image = [self convertViewToImage:back]; self.backgroundImage = image; }}Copy the code

Refer to the article

[IOS] Image binarization and black and white (gray) processing