Stiramento di un UIImmagine preservando gli angoli

Question

Sto provando ad allungare un'immagine della freccia di navigazione preservando i bordi in modo che i tratti centrali e le estremità siano fissi.

Qui è l'immagine che sto cercando di allungare:

Il seguenti IOS 5 codice permette l'immagine quando ridimensionata per allungare le porzioni centrali dell'immagine definita dalle UIEdgeInsets.

[[UIImage imageNamed:@"arrow.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 7, 15, 15)]; 

Ciò si traduce in un'immagine che assomiglia a questo (se cornice dell'immagine è impostata su 70 pixel di larghezza):

questo è in realtà quello che voglio, ma resizableImageWithCapInsets è supportato solo su iOS 5 e versioni successive.

Prima di iOS 5 l'unico metodo simile è stretchableImageWithLeftCapWidth:topCapHeight ma è possibile specificare solo i margini superiore e sinistro, il che significa che l'immagine deve avere bordi di forma uguale.

Esiste un modo iOS 4 per ridimensionare l'immagine allo stesso modo del metodo resizableImageWithCapInsets di iOS 5 o un altro modo per farlo?

Answer 1

La tua ipotesi qui è sbagliato:

Prima di iOS 5 l'unico metodo simile è stretchableImageWithLeftCapWidth: topCapHeight ma è possibile specificare solo l'inserti sinistra superiore e che significa che l'immagine deve avere bordi sagomati uguali.

I cappucci sono identificati come segue: passo il tappo sinistro, ma lo stesso principio vale per il tappo superiore.

Supponiamo che l'immagine sia larga 20 px.

• Larghezza del cappuccio sinistro: questa è la parte sul lato sinistro dell'immagine che non può essere allungata. Nel metodo stretchableImage si invia un valore di 10 per questo.
• Parte estensibile - si presume che abbia una larghezza di un pixel, quindi i pixel nella colonna "11", per una migliore descrizione
• Ciò significa che è presente un limite destro implicito del restante 9px di la tua immagine - anche questa non sarà distorta.

Questo è preso dalle Testate documentation

leftCapWidth

specificare la porzione di un'immagine che non deve essere ridimensionato quando l'immagine è allungata. Questa tecnica viene utilizzata per implementare pulsanti e altri elementi di interfaccia ridimensionabili basati su immagini. Quando un pulsante con i cappucci terminali viene ridimensionato, il ridimensionamento avviene solo nel mezzo del pulsante, nella regione tra i cappucci terminali. I cappucci terminali mantengono le loro dimensioni e aspetto originali.

Questa proprietà specifica la dimensione del limite terminale sinistro.Si assume che la parte centrale (estensibile) sia larga 1 pixel. La testata destra è quindi calcolato aggiungendo la dimensione della capsula di estremità sinistra e la porzione centrale insieme e poi sottraendo tale valore dalla larghezza dell'immagine:

rightCapWidth = image.size.width - (image.leftCapWidth + 1);

Answer 2

vostro esempio è perfettamente possibile utilizzare stretchableImageWithLeftCapWidth:topCapHeight: con un limite sinistro di 15 (a quanto pare, dalla lettura del codice). Ciò allungherà orizzontalmente il pulsante ripetendo la colonna centrale.

Answer 3

È possibile estendere UIImage consentire allungamento un'immagine con protezione bordi personalizzati (scandagliando all'interno dell'immagine, invece di piastrelle esso):

UIImage + utils.h:

#import <UIKit/UIKit.h> 
@interface UIImage(util_extensions) 
//extract a portion of an UIImage instance 
-(UIImage *) cutout: (CGRect) coords; 
//create a stretchable rendition of an UIImage instance, protecting edges as specified in cornerCaps 
-(UIImage *) stretchImageWithCapInsets: (UIEdgeInsets) cornerCaps toSize: (CGSize) size; 
@end 

UIImage + utils.m:

#import "UIImage+utils.h" 
@implementation UIImage(util_extensions) 
-(UIImage *) cutout: (CGRect) coords { 
    UIGraphicsBeginImageContext(coords.size); 
    [self drawAtPoint: CGPointMake(-coords.origin.x, -coords.origin.y)]; 
    UIImage *rslt = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return rslt; 
} 

-(UIImage *) stretchImageWithCapInsets: (UIEdgeInsets) cornerCaps toSize: (CGSize) size { 
    UIGraphicsBeginImageContext(size); 

    [[self cutout: CGRectMake(0,0,cornerCaps.left,cornerCaps.top)] drawAtPoint: CGPointMake(0,0)]; //topleft 
    [[self cutout: CGRectMake(self.size.width-cornerCaps.right,0,cornerCaps.right,cornerCaps.top)] drawAtPoint: CGPointMake(size.width-cornerCaps.right,0)]; //topright 
    [[self cutout: CGRectMake(0,self.size.height-cornerCaps.bottom,cornerCaps.left,cornerCaps.bottom)] drawAtPoint: CGPointMake(0,size.height-cornerCaps.bottom)]; //bottomleft 
    [[self cutout: CGRectMake(self.size.width-cornerCaps.right,self.size.height-cornerCaps.bottom,cornerCaps.right,cornerCaps.bottom)] drawAtPoint: CGPointMake(size.width-cornerCaps.right,size.height-cornerCaps.bottom)]; //bottomright 

    [[self cutout: CGRectMake(cornerCaps.left,0,self.size.width-cornerCaps.left-cornerCaps.right,cornerCaps.top)] 
drawInRect: CGRectMake(cornerCaps.left,0,size.width-cornerCaps.left-cornerCaps.right,cornerCaps.top)]; //top 

    [[self cutout: CGRectMake(0,cornerCaps.top,cornerCaps.left,self.size.height-cornerCaps.top-cornerCaps.bottom)] 
drawInRect: CGRectMake(0,cornerCaps.top,cornerCaps.left,size.height-cornerCaps.top-cornerCaps.bottom)]; //left 

    [[self cutout: CGRectMake(cornerCaps.left,self.size.height-cornerCaps.bottom,self.size.width-cornerCaps.left-cornerCaps.right,cornerCaps.bottom)] 
drawInRect: CGRectMake(cornerCaps.left,size.height-cornerCaps.bottom,size.width-cornerCaps.left-cornerCaps.right,cornerCaps.bottom)]; //bottom 

    [[self cutout: CGRectMake(self.size.width-cornerCaps.right,cornerCaps.top,cornerCaps.right,self.size.height-cornerCaps.top-cornerCaps.bottom)] 
drawInRect: CGRectMake(size.width-cornerCaps.right,cornerCaps.top,cornerCaps.right,size.height-cornerCaps.top-cornerCaps.bottom)]; //right 

    [[self cutout: CGRectMake(cornerCaps.left,cornerCaps.top,self.size.width-cornerCaps.left-cornerCaps.right,self.size.height-cornerCaps.top-cornerCaps.bottom)] 
drawInRect: CGRectMake(cornerCaps.left,cornerCaps.top,size.width-cornerCaps.left-cornerCaps.right,size.height-cornerCaps.top-cornerCaps.bottom)]; //interior 

    UIImage *rslt = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return [rslt resizableImageWithCapInsets: cornerCaps]; 
} 

@end 

Answer 4

UIImage *image = [UIImage imageNamed:@"img_loginButton.png"]; 
    UIEdgeInsets edgeInsets; 
    edgeInsets.left = 0.0f; 
    edgeInsets.top = 0.0f; 
    edgeInsets.right = 5.0f; //Assume 5px will be the constant portion in your image 
    edgeInsets.bottom = 0.0f; 
    image = [image resizableImageWithCapInsets:edgeInsets]; 
//Use this image as your controls image 

Answer 5

Swift versione 3.0 della risposta di Vicky.

var imageInset:UIEdgeInsets = UIEdgeInsets() 
     imageInset.left = 10.0 
     imageInset.top = 10.0 
     imageInset.bottom = 10.0 
     imageInset.right = 10.0 
     self.myImageView.image = myimage.resizableImage(withCapInsets: imageInset)