iOS meditation uiimage ' off-screen rendering ' and ' on-screen rendering ' implementation of rounded rectangles

There are two ways to add a fillet effect to a view in iOS, one that is based on "off-screen rendering" (off-screen-renderring), which can be easily implemented by setting the layer parameters of the view directly, and is often used, but with low performance, and the other is to write the underlying graphics code that implements ' On-Screen rendering ' (on-screen-renderring), you can greatly optimize the drawing performance.

The simplest and most straightforward way to implement the fillet effect in iOS is to modify the layer parameters of the view directly:

/* 设置圆角半径 */view.layer.cornerRadius5;/* 将边界以外的区域遮盖住 */view.layer.masksToBounds = YES;

This method is the simplest and fastest, but in fact the implementation of this method depends on the ' off-screen rendering ' (off-screen-rendering), the performance is very low.

Another is the implementation of on-screen-rendering, which is used to improve performance.

To extend an instance function for the UIImage class:

/** * on-screen-renderring draw uiimage Rectangular fillet */-(UIImage *) Imagewithcornerradius: (cgfloat) Radius ofsize: (cgsize) size{/ * Visible drawing area of current UIImage * /CGRect rect = (cgrect) {0.F0.F,size};/ * Create a bitmap-based context * /Uigraphicsbeginimagecontextwithoptions (Size, NO, UIScreen.mainScreen.scale);/ * Add fillet Draw path in current bitmap context * /Cgcontextaddpath (Uigraphicsgetcurrentcontext (), [Uibezierpath Bezierpathwithroundedrect:rect CornerRadius:radius] . Cgpath);/* The current drawing path intersects the original drawing path to get the final cropping drawing path */Cgcontextclip (Uigraphicsgetcurrentcontext ());/ * Draw * /[Self drawinrect:rect];/ * Get the cropped image * /UIImage *image = Uigraphicsgetimagefromcurrentimagecontext ();/ * Close the current bitmap context * /Uigraphicsendimagecontext ();returnImage;}

When used, let the instantiated UIImage object invoke the above instance method:

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(1010100100)];/* 创建并初始化UIImage */UIImage *image = [UIImage imageNamed:@"icon"];/* 添加圆角矩形 */image = [image imageWithCornerRadius:50 ofSize:imageView.frame.size];[imageView setImage:image];

Full code

UIImage category extension on-screen render instance functions:

// //UIImage +radiuscorner.h  //singleview  // //Created by Xinhou Jiang on 19/4/17.  //Copyright 2017 Xinhou Jiang. All rights reserved.  //  #import <UIKIT/UIKIT.H>    @interface  uiimage  (radiuscorner )  /* on-screen-renderring draw uiimage Rectangular fillet */ -(uiimage  *) Imagewithcornerradius: (CGFloat ) Radius ofsize: (cgsize ) size;  @end  

////UIIMAGE+RADIUSCORNER.M//Singleview////Created by Xinhou Jiang on 19/4/17.//Copyright 2017 Xinhou Jiang. All rights reserved.//#Import "Uiimage+radiuscorner.h"@implementationUIImage (Radiuscorner)/** * on-screen-renderring draw uiimage Rectangular fillet */-(UIImage *) Imagewithcornerradius: (cgfloat) Radius ofsize: (cgsize) size{/ * Visible drawing area of current UIImage * /CGRect rect = (cgrect) {0.F0.F,size};/ * Create a bitmap-based context * /Uigraphicsbeginimagecontextwithoptions (Size, NO, UIScreen.mainScreen.scale);/ * Add fillet Draw path in current bitmap context * /Cgcontextaddpath (Uigraphicsgetcurrentcontext (), [Uibezierpath Bezierpathwithroundedrect:rect CornerRadius:radius] . Cgpath);/* The current drawing path intersects the original drawing path to get the final cropping drawing path */Cgcontextclip (Uigraphicsgetcurrentcontext ());/ * Draw * /[Self drawinrect:rect];/ * Get the cropped image * /UIImage *image = Uigraphicsgetimagefromcurrentimagecontext ();/ * Close the current bitmap context * /Uigraphicsendimagecontext ();returnImage;}@end

Test code:

 @implementation viewcontroller - (void) Viewdidload {[SuperViewdidload];Uiimageview*imageview = [[UiimageviewAlloc] Initwithframe:cgrectmake ( -, -, -, -)];UIImage*image = [UIImageimagenamed:@"icon"];/ * 1. on-screen-renderring * /    //image = [Image imagewithcornerradius:50 ofSize:imageView.frame.size];[ImageView Setimage:image];/ * 2. off-screen-renderring * /ImageView. Layer. Cornerradius= -; ImageView. Layer. Maskstobounds=YES; [ Self. ViewAddsubview:imageview];}@end

iOS meditation uiimage ' off-screen rendering ' and ' on-screen rendering ' implementation of rounded rectangles