Jak mogę wziąć UIImage i dać mu czarną granicę?

Question

Jak ustawić granicę UIImage?

Answer 1

Można manipulować samym obrazem, ale o wiele lepszym sposobem jest po prostu dodać UIView zawierający UIImageView i zmienić tło na czarne. Następnie ustaw rozmiar tego widoku kontenera na nieco większy niż UIImageView.

Answer 2

Nie można dodać obramowania, ale działałoby to na ten sam efekt. Można również ustawić UIView o nazwie blackBG w tym przykładzie w UIImageView z obrazem obramowania i pustym środkiem, a następnie masz niestandardową obramowanie obrazu, a nie tylko czerń.

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]; 

Answer 3

Można to zrobić poprzez stworzenie nowego wizerunku (również odpowiedział w drugim delegowania to pytanie):

- (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; 
} 

Kod ten będzie produkować różowy obramowanie wokół obrazu. Jeśli jednak chcesz wyświetlić tylko granicę, użyj warstwy UIImageView i ustaw jej obramowanie.

Answer 4

Z OS> 3.0 można to zrobić:

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

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

Answer 5

Możesz dodać obramowanie do UIImageView, a następnie zmienić rozmiar UIImageView w zależności od wielkości obrazu:

#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; 

Makijażu upewnij się, że ustawiłeś początek obrazuView na centrum

Answer 6

#import <QuartzCore/CALayer.h> 


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

Ten kod może być używany do dodawaniazobacz obramowanie.

Answer 7

wszystkie te odpowiedzi działają dobrze, ALE dodać rect do obrazu. Załóżmy, że masz kształt (w moim przypadku motyla) i chcesz dodać obramowanie (czerwoną ramkę):

potrzebujemy dwóch etapów: 1) podjęcia obraz, konwersja do CGImage, przechodzą do funkcji wyciągnąć poza ekranem w kontekście pomocą CoreGraphics i oddać nowy CGImage

2) konwersji do UIImage tyłu i rysować:

// 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]; 

}

Dodałem normalnego motyla i większy motyl w czerwonym obwodzie.

Answer 8

Jeśli znasz wymiary swojego obrazu, najlepszym rozwiązaniem AFAIK jest dodanie ramki do warstwy UIImageView. Rzeczywiste, możesz po prostu ustawićFrame your imageView na x, y, image.size.width, image.size.height

Jeśli masz ImageView o stałym rozmiarze z dynamicznie ładowanymi obrazami, które są zmieniane (lub skalowane do AspectFit), wtedy twoim celem jest zmiana rozmiaru widoku obrazu na nowy obraz o zmienionym rozmiarze.

Najkrótsza droga do tego celu:

// 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)]; 

Ale używać AVMakeRectWithAspectRatioInsideRect, trzeba dodać to stwierdzenie

#import <AVFoundation/AVFoundation.h> 

import do pliku, a także ramy AVFoundation w projekcie (jest dołączony do pakietu SDK).

Answer 9

Funkcja ta powoduje powrót obraz z czarnym obramowaniem spróbować .. nadzieję, że to pomoże Ci

- (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; 
} 

Answer 10

// trzeba importować

QuartzCore/QuartzCore.h 

& następnie do ImageView w granicy

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

[imageView.layer setBorderWidth: 2.0]; 

[imageView.layer setCornerRadius: 5.0]; 

Answer 11

Innym sposobem jest zrobienie bezpośrednio od projektanta.

Wybierz zdjęcie i przejdź do "Pokaż inspektora tożsamości".

Tutaj można ręcznie dodać "User Defined Runtime Atrybuty":

layer.borderColor 
layer.borderWidth 

Answer 12

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

Answer 13

w Swift 3 oto jak to zrobić dla samego 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 

Answer 14

Dla tych, którzy szukają rozwiązania plug-and-play na UIImage, napisałem odpowiedź CodyMace jako rozszerzenie.

Zastosowanie: 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 

    } 

} 

Answer 15

użyć tej metody, aby dodać obramowanie poza obrazem. Możesz dostosować szerokość obramowania w stałej boderWidth.

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; 
}