[IOS] Detailed picture local stretch + achieve picture local shrinkage

(Figure top Right Corner "+" effect)

When I was developing WP7, I learned from my iOS colleague that something like the above-mentioned features were realized.

The item number is different and the total height is different, which requires that the background picture be partially stretched to the height of the response, and that the triangle above is not variant.

However, back to WP, did not find an API to do this image processing, as long as the picture display scale and the proportion of the source graph is not the same, it will cause the picture stretch deformation.

(So I can only make the design to a top-right triangle, then a solid-colored rectangle, the solid-colored rectangle stretches without problems.) If you want to change the image locally, you have to handle the pixels yourself.

I. Partial stretching

Now let's take a look at how to do a partial stretch of the image, with the following API:

-(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets Resizingmode: (Uiimageresizingmode) ResizingMode;

Capinsets defines the non-stretch range of the picture (this range is relative to the source picture size), Resizingmode defines the image to be transformed in a stretched/tiled manner.

After setting the four-week non-stretch range, the middle blue section is stretched/tiled.

1. Let's talk about stretching based on a point first.

The original image size is 200 * 78, you need to stretch it to 200 * 250, the width remains the same.

①. In the case of no local stretching, we get the effect:

②. You know, in order to achieve the effect, the picture can not be stretched around, now we have to stretch the middle of a point.

- (void) viewdidload {[Super viewdidload]; //The source picture size can be viewed by touching it by looking at the effect of the stretch point changeUIImage *originimage = [UIImage imagenamed:@"WeChat"];//*Originbutton = [[UIButton alloc] Initwithframe:cgrectmake (0, $, $, +)]; Originbutton.userinteractionenabled=NO;　[Originbutton setbackgroundimage:originimage Forstate:uicontrolstatenormal];　[Self.view Addsubview:originbutton]; //picture after stretchingCGFloat width = originImage.size.width/2.0; CGFloat height= OriginImage.size.height/2.0; UIImage*newimage = [Originimage resizableimagewithcapinsets:uiedgeinsetsmake (height,width,height,width) ResizingMode: Uiimageresizingmodestretch];//take a positive middle point and stretch the wayResizablebutton = [[UIButton alloc] Initwithframe:cgrectmake (205, $, $, -)];//height changed from 78 to[Resizablebutton setbackgroundimage:originimage forstate:uicontrolstatenormal]; [Self.view Addsubview:resizablebutton];}//implement touch if the image is stretched to the left of the original, according to the location of the touch point-(void) touchesmoved: (Nsset<uitouch *> *) touches withevent: (Uievent *)Event{Uitouch*touch =[touches anyobject]; Cgpoint Point=[Touch LocationInView:self.view]; Cgpoint Actualpoint= [Self.view convertpoint:point Toview:originbutton];//Coordinate Transformation    if(Actualpoint.x >=0&& actualpoint.x <= originButton.frame.size.width &&Actualpoint.y>=0&& Actualpoint.y <=originButton.frame.size.height) {NSLog (@"--------%@---------", Nsstringfromcgpoint (Actualpoint)); UIImage*image1 = [UIImage imagenamed:@"WeChat"]; CGFloat Top=Actualpoint.y; CGFloat Left=Actualpoint.x; CGFloat Bottom= Image1.size.height-Actualpoint.y; CGFloat Right= Image1.size.width-Actualpoint.x; UIImage*newimage = [Image1 resizableimagewithcapinsets:uiedgeinsetsmake (top,left,bottom,right) Resizingmode: Uiimageresizingmodestretch]; [Resizablebutton setbackgroundimage:newimage Forstate:uicontrolstatenormal]; } }

③. When the width is greater than the actual width of the picture:

④. When the length and width are greater than the picture, the transverse portrait is stretched.

The equivalent of the vertical stretch at the end of the above (while the extruded point is also stretched) continues to be stretched horizontally by the extrude point.

Summary: All of the above are stretched based on a single point.

When stretched vertically, a line that stretches out to stretch the point horizontally stretches to a new height.

When you stretch horizontally, the lines that are stretched to stretch the point vertically are stretched to the new width.

　　

2. Now let's look at stretching based on a piece of area

①. The width is constant, the height becomes larger, the use of stretch stretch, and so on.

②. Both the height and the width are increased, using tiled tiles.

Also better explain the above stretch stretching

   

Two. Picture local shrinkage

However, if the size of the control is smaller than the picture, it will cause the image to compress. The triangles are particularly visible.

Now that you can stretch the image locally, can you compress the image locally?

Think for a long time, with the way of stretching resizableimagewithcapinsets did not find a solution, it only wrote.

1. Both horizontal and vertical, you can only shrink the part you want to shrink, so as with stretching, you need a uiedgeinsets.

2. Cut down the shrinking parts and get smaller. So we need to know the width and height of the change, that is, the final width and height of the picture cgrect.

3. This partial contraction process is the process of cutting, shrinking, and stitching pictures.

For convenience, write a classification that is similar to the method of stretching //capinsets The part that does not need to be stretched relative to the picture

//ActualSize the size that needs to be displayed-(UIImage *) Shrinkimagewithcapinsets: (uiedgeinsets) capinsets actualsize: (cgsize) actualsize{ UIImage newimage=Self ; if(Actualsize.width <self.size.width) {        //the width is getting smaller.NewImage = crop-Intermediate shrinkage-splicing (newimage); //Up to three columns of detailed code see demo at the end of the article
if(Actualsize.height >=self.size.height) {                returnNewallimage; }//Otherwise, vertical processing continues    }    if(Actualsize.height <self.size.height) {        //the height is getting smaller.NewImage = crop-Intermediate shrinkage-splicing (newimage); //Up to three lines for details see demo at the end of this article 

returnreturn  nil;}

Picture cropping:

// crop Picture -(UIImage *) Clipimagewithcliprect: (cgrect) cliprect{    = cgimagecreatewithimageinrect (self.) Cgimage, clipRect);    Uigraphicsbeginimagecontext (cliprect.size); // Set Picture size          = uigraphicsgetcurrentcontext ();    Cgcontextdrawimage (context, clipRect, clipimageref);     *clipimage = [UIImage imagewithcgimage:clipimageref];        Uigraphicsendimagecontext ();         return clipimage;}

Picture shrinkage:

// scale the picture by a certain size -(UIImage *) Scaleimagetosize: (cgsize) size{    uigraphicsbeginimagecontext (size); // set a new size    [Self Drawinrect:cgrectmake (00, Size.width, Size.Height)];     *scaleimage = uigraphicsgetimagefromcurrentimagecontext ();    Uigraphicsendimagecontext ();     return scaleimage;}

Multiple picture stitching:

+ (UIImage *) Combinewithimages: (Nsarray *) Images Orientation: (yfimagecombinetype) orientation{Nsmutablearray*sizearray =[[Nsmutablearray alloc] init]; CGFloat MaxHeight=0, MaxWidth =0;  for(IDImageinchimages) {//if ([Image Iskindofclass:[uiimage class]]) {Cgsize size = ((UIImage *image). Size; if(Orientation = = Yfimagecombinehorizental) {//HorizontalMaxWidth + =Size.width; MaxHeight= (Size.Height > MaxHeight)?Size.height:maxHeight; }            Else{maxheight+=Size.Height; MaxWidth= (Size.width > MaxWidth)?Size.width:maxWidth; } [Sizearray Addobject:[nsvalue valuewithcgsize:size];//        }} cgfloat lastlength=0;//record the most right or bottom value of the last timeUigraphicsbeginimagecontext (Cgsizemake (MaxWidth, maxheight));  for(inti =0; i < Sizearray.count; i++) {cgsize size=[[Sizearray objectatindex:i] cgsizevalue];        CGRect Currentrect; if(Orientation = = Yfimagecombinehorizental) {//HorizontalCurrentrect = CGRectMake (Lastlength, (maxheight-size.height)/2.0, Size.width, size.height);            [[Images objectatindex:i] drawinrect:currentrect]; Lastlength=Cgrectgetmaxx (Currentrect); }        Else{currentrect= CGRectMake ((maxwidth-size.width)/2.0, Lastlength, Size.width, size.height);            [[Images objectatindex:i] drawinrect:currentrect]; Lastlength=Cgrectgetmaxy (Currentrect); }} UIImage* Combinedimage =Uigraphicsgetimagefromcurrentimagecontext ();        Uigraphicsendimagecontext (); returncombinedimage;}

Use: Introduce header file #import "Uiimage+yfshrink.h"

    //picture after shrinking 150 * 70 need to pass in the actual size of a display//The actual display width must actualwidth <= left + right; //The actual display height must actualheight <= top + bottom;UIImage *originimage = [UIImage imagenamed:@"WeChat"];//*UIImage *shrinkimage = [Originimage shrinkimagewithcapinsets:uiedgeinsetsmake ( -, +, -, -) Actualsize:cgsizemake ( Max, -)]; Shrinkbutton= [[UIButton alloc] Initwithframe:cgrectmake ( -, the, Max, -)];    [Shrinkbutton setbackgroundimage:shrinkimage Forstate:uicontrolstatenormal]; [Self.view Addsubview:shrinkbutton];

Effect: Callout:

GitHub links

[IOS] Detailed picture local stretch + achieve picture local shrinkage