IOS development-Image Processing

IOS development-Image Processing
Looking at the real society and the mobile app market, this is an era of facial recognition, and the nice and beautiful APP interface is the face of mobile apps. the hard work of the uidesigner is indispensable for the beautiful appearance. If you do not understand the style, the hard work of the uidesigner will be wasted. for example, the following figure shows the size of the button image: 59*32. First, the image is displayed as an image, and the image is displayed at 200*50.

1 # import "ViewController. h "2 3 @ interface ViewController () 4 5 @ end 6 7 @ implementation ViewController 8 9-(void) viewDidLoad {10 [super viewDidLoad]; 11 // stretch the image 12 [self stretchPhoto]; 13} 14 15-(void) stretchPhoto16 {17 UIImageView * imageView = [[UIImageView alloc] initWithFrame: CGRectMake (60,180,200, 50)]; 18 imageView. image = [UIImage imageNamed: @ "btnbg_blue.png"]; 19 [self. view addSubview: imageView]; 20} 21 22 @ end

 

We can clearly see that the image has lost its original appearance, especially the four corners, because the image size is 59*32, the size of the set image display position is 200*50, and the image is broken. next we will set a stretch point for this image:

1 # import "ViewController. h "2 3 @ interface ViewController () 4 5 @ end 6 7 @ implementation ViewController 8 9-(void) viewDidLoad {10 [super viewDidLoad]; 11 12 // stretch the image 13 [self stretchPhoto]; 14} 15 16 // stretch the image 17-(void) stretchPhoto18 {19 UIImageView * imageView = [[UIImageView alloc] initWithFrame: CGRectMake (60,180,200, 50)]; 20 [self. view addSubview: imageView]; 21 22 // set the image stretch point 23 UIImage * images = [UIImage imageNamed: @ "btnbg_blue.png"]; // 59*3224 images = [images stretchableImageWithLeftCapWidth: 30 topCapHeight: 16]; 25 imageView. image = images; 26} 27 28 @ end

 

You can clearly see that the image is perfectly stretched and displayed. The following describes how to set the image stretch point:

1 - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;2 @property(nonatomic,readonly) NSInteger leftCapWidth;   // default is 0. if non-zero, horiz. stretchable. right cap is calculated as width - leftCapWidth - 13 @property(nonatomic,readonly) NSInteger topCapHeight;   // default is 0. if non-zero, vert. stretchable. bottom cap is calculated as height - topCapWidth - 1

 

The content above is the explanation of this method in Xcode document. Row 1st is the method name and the returned value is a UIImage object. Two NSInteger parameters must be passed; rows 2nd and 3rd are the two attributes that need to pass parameters in rows 1st. The default value is 0. from other places, we can see that these two attributes are named by the end cover, that is, the left End Cover width and top cover height. in this case, the left and top of the image are stretched. What about the right and bottom? The API documentation provides the formula: rightCapWidth = image. size. width-(image. leftCapWidth + 1); that is: Right End Cover width = image Width-(left End Cover width + 1); botw.apheight = image. size. height-(image. topCapHeight + 1); that is: bottom end cover = picture height-(Top End Cover + 1); this shows that, the final stretch position is the area (yellow in the middle) next to the intersection of the Left end cover and the top end cover, that is, only 1*1 point of the given area is stretched in this way. generally, we are used to setting the image width and height half, which can avoid unnecessary troubles caused by unclear edge changes.