Come posso prendere un UIImage e dargli un bordo nero?


126

Come posso impostare il bordo di un UIImage?


Per caso se qualcuno arriva su una ricerca di Google (come ho fatto io) e sta cercando di aggiungere un bordo a UIImageView, cerca la risposta di @mclin in fondo. Funziona alla grande!
Mahendra Liya,

Risposte:


241

Con OS> 3.0 puoi farlo:

//you need this import
#import <QuartzCore/QuartzCore.h>

[imageView.layer setBorderColor: [[UIColor blackColor] CGColor]];
[imageView.layer setBorderWidth: 2.0];

1
Quando aspetto le immagini in imageView sopra, l'immagine viene visualizzata perfettamente ma i lati dell'immagine vengono lasciati vuoti e lo stesso accade alla parte superiore e inferiore dell'immagine quando l'immagine è orizzontale. Lo spazio vuoto sembra brutto con il bordo impostato su di esso .. Hai affrontato questo problema? Se sì, ti preghiamo di suggerire un metodo per risolvere questo problema
Incontra il

@Hamutsi imageView.image = myImage;
Kyle Clegg,

6
Si, puoi. Le istanze di UIImagepossono essere trascinate in un contesto grafico con CoreGraphics.
Mark Adams,

Come sottolinea @rockstar, potrebbe essere necessario aggiungere imageView.layer.masksToBounds = YES;
Bjorn Roche,

Questo link era la soluzione che stavo cercando.
GrandSteph,

67

Puoi farlo creando una nuova immagine (hai risposto anche negli altri tuoi post di questa domanda):

- (UIImage*)imageWithBorderFromImage:(UIImage*)source;
{
  CGSize size = [source size];
  UIGraphicsBeginImageContext(size);
  CGRect rect = CGRectMake(0, 0, size.width, size.height);
  [source drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];

  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSetRGBStrokeColor(context, 1.0, 0.5, 1.0, 1.0); 
  CGContextStrokeRect(context, rect);
  UIImage *testImg =  UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return testImg;
}  

Questo codice produrrà un bordo rosa attorno all'immagine. Tuttavia, se hai intenzione di visualizzare solo il bordo, usa il livello di UIImageViewe impostane il bordo.


Come si specifica la larghezza del bordo desiderato?
Patrick,

16
CGContextSetLineWidth
Marcus S. Zarra,

@ MarcusS.Zarra Mi rendo conto che non esistevano quando è stata data una risposta a questa domanda, ma questa soluzione non tiene conto del display Retina. Se potessi rivederlo, ti sarei davvero grato :)
Luca

@lukech Non è necessario rivedere il campione. Basta aumentare la larghezza della linea se si è su un dispositivo retina.
Marcus S. Zarra,

2
Il sizeè 320x480, indipendentemente dal fatto che siete su un dispositivo Retina, in modo che quando si salva l'immagine, fa risparmiare a quella risoluzione 320x480px, non 640x960.
Luca,

38
#import <QuartzCore/CALayer.h>


UIImageView *imageView = [UIImageView alloc]init];
imageView.layer.masksToBounds = YES;
imageView.layer.borderColor = [UIColor blackColor].CGColor;
imageView.layer.borderWidth = 1;    

Questo codice può essere utilizzato per aggiungere il UIImageViewbordo della vista.


Perfetto! Non c'è bisogno di passare attraverso la seccatura di CGImage. (Non avevo bisogno di salvare l'immagine con il bordo). Grazie mille!
Septronic,

13
imageView_ProfileImage.layer.cornerRadius =10.0f;
imageView_ProfileImage.layer.borderColor = [[UIColor blackColor] CGColor];
imageView_ProfileImage.layer.borderWidth =.4f;
imageView_ProfileImage.layer.masksToBounds = YES;

Brillante hack, specialmente quando si tratta dell'utilizzo della memoria - le altre risposte impiegheranno 2 volte la memoria solo per aggiungere momentaneamente quel bordo. Suggerimento professionale: se stai cercando di aggiungere solo un bordo su un lato, puoi anche cambiare i limiti. Bella risposta!
judepereira,

11

Se conosci le dimensioni della tua immagine, l'aggiunta di un bordo al livello di UIImageView è la migliore soluzione AFAIK. Infatti, puoi semplicemente impostareFrame imageView su x, y, image.size.width, image.size.height

Nel caso in cui abbiate un ImageView di dimensioni fisse con immagini caricate dinamicamente che vengono ridimensionate (o ridimensionate in AspectFit), il vostro obiettivo è ridimensionare l'immagine visualizzata alla nuova immagine ridimensionata.

Il modo più breve per farlo:

// containerView is my UIImageView
containerView.layer.borderWidth = 7;
containerView.layer.borderColor = [UIColor colorWithRed:0.22 green:0.22 blue:0.22 alpha:1.0].CGColor;

// this is the key command
[containerView setFrame:AVMakeRectWithAspectRatioInsideRect(image.size, containerView.frame)];

Ma per utilizzare AVMakeRectWithAspectRatioInsideRect, è necessario aggiungere questo

#import <AVFoundation/AVFoundation.h>

dichiarazione di importazione nel file e includere anche il framework AVFoundation nel progetto (fornito in bundle con l'SDK).


Grazie @rafinskipg! Molto apprezzato.
ScorpionKing2k5,

8

Non puoi aggiungere un bordo, ma funzionerebbe per lo stesso effetto. In questo esempio potresti anche trasformare l'UIView chiamato blackBG in un UIImageView con un'immagine di bordo e un centro vuoto, quindi avresti un bordo di immagine personalizzato anziché solo nero.

UIView *blackBG = [[UIView alloc] initWithFrame:CGRectMake(0,0,100,100)];

blackBG.backgroundColor = [UIColor blackColor];

UIImageView *myPicture = [[UIImageView alloc] initWithImage:
                          [UIImage imageNamed: @"myPicture.jpg"]];

int borderWidth = 10;

myPicture.frame = CGRectMake(borderWidth,
                             borderWidth,
                             blackBG.frame.size.width-borderWidth*2,
                             blackBG.frame.size.height-borderWidth*2)];

[blackBG addSubview: myPicture];

Questo è quello che ho finito per fare; nidificando il mio UIImageViewal centro di un UIViewcolore leggermente più grande del mio colore della cornice.
Ben Kreeger,

6

tutte queste risposte funzionano bene MA aggiungi un retto a un'immagine. Supponiamo che tu abbia una forma (nel mio caso una farfalla) e desideri aggiungere un bordo (un bordo rosso):

abbiamo bisogno di due passaggi: 1) prendere l'immagine, convertire in CGImage, passare a una funzione per disegnare fuori schermo in un contesto usando CoreGraphics e restituire un nuovo CGImage

2) converti in uiimage indietro e disegna:

// remember to release object!
+ (CGImageRef)createResizedCGImage:(CGImageRef)image toWidth:(int)width
andHeight:(int)height
{
// create context, keeping original image properties
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, width,
                                             height,
                                             8
                                             4 * width,
                                             colorspace,
                                             kCGImageAlphaPremultipliedFirst
                                             );

 CGColorSpaceRelease(colorspace);

if(context == NULL)
    return nil;

// draw image to context (resizing it)
CGContextSetInterpolationQuality(context, kCGInterpolationDefault);

CGSize offset = CGSizeMake(2,2);
CGFloat blur = 4;   
CGColorRef color = [UIColor redColor].CGColor;
CGContextSetShadowWithColor ( context, offset, blur, color);

CGContextDrawImage(context, CGRectMake(0, 0, width, height), image);
// extract resulting image from context
CGImageRef imgRef = CGBitmapContextCreateImage(context);
CGContextRelease(context);
return imgRef;

}

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

CGRect frame = CGRectMake(0,0,160, 122);
UIImage * img = [UIImage imageNamed:@"butterfly"]; // take low res OR high res, but frame should be the low-res one.
imgV = [[UIImageView alloc]initWithFrame:frame];
[imgV setImage: img];
imgV.center = self.view.center;
[self.view addSubview: imgV];

frame.size.width = frame.size.width * 1.3;
frame.size.height = frame.size.height* 1.3;
CGImageRef cgImage =[ViewController createResizedCGImage:[img CGImage] toWidth:frame.size.width andHeight: frame.size.height ];

imgV2 = [[UIImageView alloc]initWithFrame:frame];
[imgV2 setImage: [UIImage imageWithCGImage:cgImage] ];

// release:
if (cgImage) CGImageRelease(cgImage);

[self.view addSubview: imgV2];

}

Ho aggiunto una farfalla normale e una farfalla più grande bordata di rosso.


c'è un modo per impostare la larghezza del bordo rosso qui.
coder1010,

5

È possibile aggiungere un bordo a UIImageView e quindi modificare le dimensioni di UIimageView in base alle dimensioni dell'immagine:

#import <QuartzCore/QuartzCore.h>


// adding border to the imageView
[imageView.layer setBorderColor: [[UIColor whiteColor] CGColor]];
[imageView.layer setBorderWidth: 2.0];

// resize the imageView to fit the image size
CGSize size = [image size];
float factor = size.width / self.frame.size.width;
if (factor < size.height / self.frame.size.height) {
    factor = size.height / self.frame.size.height;
}

CGRect rect = CGRectMake(0, 0, size.width/factor, size.height/factor);
imageView.frame = rect;

Assicurati di impostare l'origine di imageView al centro


2

È possibile manipolare l'immagine stessa, ma un modo molto migliore è semplicemente aggiungere un UIView che contiene UIImageView e cambiare lo sfondo in nero. Quindi impostare la dimensione della vista del contenitore su un po 'più grande di UIImageView.


Funzionerà con una diversa dimensione di immagini che cambiano al volo? UIImageView cambierà continuamente e UIView? ps Manipolare l'immagine stessa sarà grandiosa.
Shay,

Dovresti regolare la cornice della vista contenitore insieme all'immagine: potresti salvare le proprietà del centro per entrambe le viste, regolare la dimensione dell'immagine, regolare la dimensione del contenitore e quindi reimpostare le proprietà del centro per entrambe.
Kendall Helmstetter Gelner,

Questo è esattamente il modo in cui l'ho fatto invece di accarezzare il percorso con CG. sembrava solo più facile.
Corey Floyd,

2

Un altro modo è quello di fare direttamente dal designer.

Seleziona la tua immagine e vai sotto "Mostra la finestra di ispezione Identità".

Qui puoi aggiungere manualmente " Attributi di runtime definiti dall'utente" :

layer.borderColor
layer.borderWidth


inserisci qui la descrizione dell'immagine


1
Questo non funzionerà in quanto è necessario CGColor e tramite XIB fornisce solo UIColor
codesnooker

Il colore non funzionerà, ma se hai solo bisogno di uno nero - questa è la risposta più efficace "righe di codice" = D
soprof

1

// devi importare

QuartzCore/QuartzCore.h

e poi per ImageView in bordo

[imageView.layer setBorderColor: [[UIColor blackColor] CGColor]];

[imageView.layer setBorderWidth: 2.0];

[imageView.layer setCornerRadius: 5.0];

1

Questa funzione ti restituirà l'immagine con il bordo nero prova questo .. spero che questo ti possa aiutare

- (UIImage *)addBorderToImage:(UIImage *)image frameImage:(UIImage *)blackBorderImage
{
    CGSize size = CGSizeMake(image.size.width,image.size.height);
    UIGraphicsBeginImageContext(size);

    CGPoint thumbPoint = CGPointMake(0,0);

    [image drawAtPoint:thumbPoint];


    UIGraphicsBeginImageContext(size);
    CGImageRef imgRef = blackBorderImage.CGImage;
    CGContextDrawImage(UIGraphicsGetCurrentContext(), CGRectMake(0, 0, size.width,size.height), imgRef);
    UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    CGPoint starredPoint = CGPointMake(0, 0);
    [imageCopy drawAtPoint:starredPoint];
    UIImage *imageC = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return imageC;
}

Se hai trovato gliches per favore fammi sapere ... lo migliorerò
SachinVsSachin

1

In Swift 3 ecco come lo fai con lo stesso UIImage:

let size = CGSize(width: image.size.width, height: image.size.height)
UIGraphicsBeginImageContext(size)
let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
image?.draw(in: rect, blendMode: .normal, alpha: 1.0)
let context = UIGraphicsGetCurrentContext()
context?.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1)
context?.stroke(rect)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

self.imageView.image = newImage

1

Per coloro che cercano una soluzione plug-and-play su UIImage, ho scritto la risposta di CodyMace come estensione.

Uso: let outlined = UIImage(named: "something")?.outline()

extension UIImage {

    func outline() -> UIImage? {

        let size = CGSize(width: self.size.width, height: self.size.height)
        UIGraphicsBeginImageContext(size)
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        self.draw(in: rect, blendMode: .normal, alpha: 1.0)
        let context = UIGraphicsGetCurrentContext()
        context?.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1)
        context?.stroke(rect)
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage

    }

}

0

Ho creato una classe che aggiunge un bordo a imageView h. Usa questa classe invece di UIImageView. Ho dato un riempimento di 4. Puoi dare secondo il tuo desiderio.

class UIBorderImageView: UIView {

private lazy var imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.contentMode = .scaleAspectFit
    imageView.translatesAutoresizingMaskIntoConstraints = false
    return imageView
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = UIColor.White()
    self.layer.borderColor = UIColor.GreyMedium().cgColor
    self.layer.borderWidth = 1.0
    self.layer.cornerRadius = 4.0
    self.layer.masksToBounds = true
    self.setUpViews()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

private func setUpViews(){
    self.addSubview(imageView)
    self.addConstraintsWithFormat(format: "H:|-4-[v0]-4-|", views: imageView)
    self.addConstraintsWithFormat(format: "V:|-4-[v0]-4-|", views: imageView)
}

func configureImageViewWith(image:UIImage){
    self.imageview.image = image 
}}

-1

Uso questo metodo per aggiungere un bordo esterno all'immagine . È possibile personalizzare la larghezza del bordo in modo boderWidthcostante.

Swift 3

func addBorderToImage(image : UIImage) -> UIImage {
    let bgImage = image.cgImage
    let initialWidth = (bgImage?.width)!
    let initialHeight = (bgImage?.height)!
    let borderWidth = Int(Double(initialWidth) * 0.10);
    let width = initialWidth + borderWidth * 2
    let height = initialHeight + borderWidth * 2
    let data = malloc(width * height * 4)

    let context = CGContext(data: data,
                        width: width,
                        height: height,
                        bitsPerComponent: 8,
                        bytesPerRow: width * 4,
                        space: (bgImage?.colorSpace)!,
                        bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue);

    context?.draw(bgImage!, in: CGRect(x: CGFloat(borderWidth), y: CGFloat(borderWidth), width: CGFloat(initialWidth), height: CGFloat(initialHeight)))
    context?.setStrokeColor(UIColor.white.cgColor)
    context?.setLineWidth(CGFloat(borderWidth))
    context?.move(to: CGPoint(x: 0, y: 0))
    context?.addLine(to: CGPoint(x: 0, y: height))
    context?.addLine(to: CGPoint(x: width, y: height))
    context?.addLine(to: CGPoint(x: width, y: 0))
    context?.addLine(to: CGPoint(x: 0, y: 0))
    context?.strokePath()

    let cgImage = context?.makeImage()
    let uiImage = UIImage(cgImage: cgImage!)

    free(data)

    return uiImage;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.