Bir UIImage'ı nasıl alıp ona siyah bir kenarlık verebilirim?


126

A'nın sınırını nasıl ayarlayabilirim UIImage?


Şans eseri, birisi bir google aramasıyla duyarsa (benim yaptığım gibi) ve UIImageView'a bir sınır eklemek istiyorsa, alttaki @mclin tarafından verilen cevabı arayın. Harika çalışıyor!
Mahendra Liya

Yanıtlar:


241

OS> 3.0 ile bunu yapabilirsiniz:

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

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

1
Yukarıdaki imageView'daki görüntüleri en boy oranıyla sığdırdığımda, görüntü mükemmel bir şekilde görüntülenir, ancak görüntünün yanları boş bırakılır ve aynı durum, görüntü yatay olduğunda görüntünün üst ve alt kısmında da olur. Boş alan, kenarlık ayarlanmış olarak çirkin görünüyor .. Bu sorunla karşılaştınız mı? Cevabınız evet ise, lütfen bunu çözmek için bir yöntem önerin
tanışın

@Hamutsi imageView.image = MyImage;
Kyle Clegg

6
Evet yapabilirsin. Örnekleri, UIImageCoreGraphics ile bir grafik bağlamına çekilebilir.
Mark Adams

@Rockstar'ın da işaret ettiği gibi, imageView.layer.masksToBounds = YES eklemeniz gerekebilir;
Bjorn Roche

Bu bağlantı aradığım çözümdü.
GrandSteph

67

Bunu, yeni bir resim oluşturarak yapabilirsiniz (ayrıca bu sorunun diğer gönderisinde de yanıtlanmıştır):

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

Bu kod, görüntünün etrafında pembe bir kenarlık oluşturacaktır. Bununla birlikte, sadece kenarlığı görüntüleyecekseniz, o zaman katmanını kullanın UIImageViewve kenarlığını ayarlayın.


İstediğiniz bordürün genişliğini nasıl belirlersiniz?
Patrick

16
CGContextSetLineWidth
Marcus S. Zarra

@ MarcusS.Zarra Bu soru yanıtlandığında var olmadıklarını fark ettim, ancak bu çözüm Retina ekranı dikkate almıyor. Eğer revize edebilirseniz gerçekten minnettar olurum :)
Luke

@lukech Örneğin revize edilmesine gerek yoktur. Retina cihazındaysanız sadece çizgi genişliğini artırın.
Marcus S. Zarra

2
sizeGörüntüyü kaydederken yüzden, o 320x480 çözünürlük değil 640x960 de kaydeder, ne olursa olsun bir Retina cihazdaysanız olup olmadığına 320x480 olduğunu.
Luke

38
#import <QuartzCore/CALayer.h>


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

Bu kod, UIImageViewgörünüm sınırı eklemek için kullanılabilir .


mükemmel! CGImage ile uğraşmanıza gerek yok. (Resmi kenarlıkla kaydetmeme gerek yoktu). Çok teşekkürler!
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;

Zekice bir hack, özellikle bellek kullanımı söz konusu olduğunda - diğer cevaplar, sadece bu sınırı anlık olarak eklemek için 2x bellek alacaktır. Profesyonel ipucu - Yalnızca bir tarafa kenarlık eklemek istiyorsanız, sınırları da değiştirebilirsiniz. Mükemmel cevap!
judepereira

11

Görüntünüzün boyutlarını biliyorsanız, UIImageView katmanına bir kenarlık eklemek en iyi çözüm AFAIK'tir. Aslında, imageView'ınızı x, y, image.size.width, image.size.height olarak ayarlayabilirsiniz.

Dinamik olarak yüklenen ve yeniden boyutlandırılan (veya AspectFit'e ölçeklenen) görüntülere sahip sabit boyutta bir ImageView'a sahipseniz, amacınız görüntü görünümünü yeni yeniden boyutlandırılmış görüntüye yeniden boyutlandırmaktır.

Bunu yapmanın en kısa yolu:

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

Ancak AVMakeRectWithAspectRatioInsideRect'i kullanmak için bunu eklemeniz gerekir

#import <AVFoundation/AVFoundation.h>

dosyanıza import deyimi ve ayrıca projenize AVFoundation çerçevesini dahil edin (SDK ile birlikte gelir).


@Rafinskipg teşekkürler! Çok minnettarım.
ScorpionKing2k5

8

Bir sınır ekleyemezsiniz, ancak bu aynı etki için işe yarar. Ayrıca bu örnekte blackBG olarak adlandırılan UIView'i bir kenarlık görüntüsü ve boş bir ortası olan bir UIImageView haline getirebilir ve ardından sadece siyah yerine özel bir görüntü kenarlığınız olur.

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

Sonunda yaptığım şey bu; çerçeve rengimin UIImageViewbiraz daha büyük bir ortasına yerleştiriyorum UIView.
Ben Kreeger

6

tüm bu cevaplar iyi çalışıyor AMA bir resme bir rect ekleyin. Bir şekle sahip olduğunuzu (benim durumumda bir kelebek) ve bir sınır (kırmızı kenarlık) eklemek istediğinizi varsayalım:

iki adıma ihtiyacımız var: 1) görüntüyü alın, CGImage'a dönüştürün, CoreGraphics kullanarak bir bağlamda ekran dışına çizmek için bir işleve geçin ve yeni bir CGImage verin

2) uiimage'e dönüştürün ve çizin:

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

}

Normal bir kelebek ve kırmızı bordürlü daha büyük bir kelebek ekledim.


Burada kırmızı kenarlığın genişliğini ayarlamanın herhangi bir yolu var mı?
coder1010

5

UIImageView'a kenarlık ekleyebilir ve ardından UIimageView boyutunu görüntü boyutuna göre değiştirebilirsiniz:

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

İmageView başlangıç ​​noktasını merkeze ayarladığınızdan emin olun.


2

Görüntünün kendisini değiştirebilirsiniz, ancak çok daha iyi bir yol, UIImageView içeren bir UIView eklemek ve arka planı siyaha çevirmektir. Daha sonra, bu konteyner görünümünün boyutunu UIImageView'dan biraz daha büyük olacak şekilde ayarlayın.


Anında değişen farklı boyuttaki görüntülerle çalışacak mı? UIImageView her zaman değişecek ve UIView? ps Görüntünün kendisini manipüle etmek harika olacaktır.
Shay

Görüntüyle birlikte içeren görünümün çerçevesini de ayarlamanız gerekir; her iki görünüm için de merkez özelliklerinden kaydedebilir, görüntü boyutunu ayarlayabilir, kap boyutunu ayarlayabilir ve ardından her ikisi için merkez özelliklerini yeniden ayarlayabilirsiniz.
Kendall Helmstetter Gelner

CG ile yolu okşamaktansa, bunu tam olarak böyle yaptım. daha kolay görünüyordu.
Corey Floyd

2

Başka bir yol da doğrudan tasarımcıdan yapmaktır.

Resminizi seçin ve "Kimlik denetçisini göster" in altına gidin.

Burada " Kullanıcı Tanımlı Çalışma Zamanı Niteliklerini" manuel olarak ekleyebilirsiniz :

layer.borderColor
layer.borderWidth


görüntü açıklamasını buraya girin


1
CGColor'a ihtiyacınız olduğu için bu işe yaramayacak ve XIB aracılığıyla yalnızca UIColor sağlıyor
codenooker

Renk işe yaramaz, ancak yalnızca siyah bir renge ihtiyacınız varsa - bu en "kod satırları" verimli yanıt = D
soprof

1

// içe aktarmanız gerekiyor

QuartzCore/QuartzCore.h

& sonra sınırda ImageView için

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

[imageView.layer setBorderWidth: 2.0];

[imageView.layer setCornerRadius: 5.0];

1

Bu işlev size siyah kenarlıklı bir görüntü döndürür bunu deneyin .. umarım bu size yardımcı olur

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

Herhangi bir kusur bulursanız lütfen bana bildirin ... onu geliştireceğim
SachinVsSachin

1

Swift 3'te bunu UIImage'ın kendisine nasıl yapacağınız:

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

UIImage'da tak ve çalıştır çözümü arayanlar için CodyMace'in yanıtını bir uzantı olarak yazdım.

Kullanımı: 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

İmageView h'ye bir sınır ekleyen bir sınıf oluşturdum. UIImageView yerine bu sınıfı kullanın. 4 dolgu verdim. İsteğinize göre verebilirsiniz.

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

Görüntünün dışına bir sınır eklemek için bu yöntemi kullanıyorum . Sınır genişliğini boderWidthsabit olarak özelleştirebilirsiniz .

Hızlı 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;
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.