Як я можу взяти UIImage та надати йому чорну межу?


126

Як я можу встановити межу UIImage ?


Випадково, якщо хтось почує пошук у Google (як я) і шукає додавання межі до UIImageView, шукайте відповідь у @mclin знизу. Чудово працює!
Махендра Лія

Відповіді:


241

З ОС> 3.0 ви можете це зробити:

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

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

1
Коли я аспект Підходить до зображень у наведеному вище imageView, зображення переглядається ідеально, але сторони зображення залишаються порожніми, і те ж саме відбувається з верхньою та нижньою частиною зображення, коли зображення є пейзажним. Порожній простір виглядає некрасиво з встановленими на ньому рамками. Чи стикалися ви з цією проблемою? Якщо так, будь ласка, запропонуйте спосіб вирішення цього питання
Зустрічайтеся

@Hamutsi imageView.image = myImage;
Кайл Клегг

6
Так, ти можеш. Екземпляри UIImageможна вкласти в графічний контекст за допомогою CoreGraphics.
Марк Адамс

Як вказує @rockstar, вам може знадобитися додати imageView.layer.masksToBounds = ТАК;
Бйорн Рош

Це посилання було рішенням, яке я шукав.
GrandSteph

67

Ви можете зробити це, створивши нове зображення (також відповіли в іншій публікації цього питання):

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

Цей код створить рожеву рамку навколо зображення. Однак якщо ви збираєтеся просто відобразити межу, тоді використовуйте шар UIImageViewі встановіть його межу.


Як вказати потрібну ширину межі?
Патрік

16
CGContextSetLineWidth
Маркус С. Зарра

@ MarcusS.Zarra Я розумію, що їх не було, коли відповіли на це запитання, але це рішення не враховує відображення Retina. Якщо ви могли це переглянути, я був би вам дуже вдячний :)
Лука

@lukech Зразок не потребує перегляду. Просто збільште ширину лінії, якщо ви перебуваєте на пристрої сітківки.
Маркус С. Зарра

2
Розмір size320x480 незалежно від того, ви перебуваєте на пристрої Retina чи ні, тож, коли ви зберігаєте зображення, він зберігає роздільну здатність 320x480px, а не 640x960.
Лука

38
#import <QuartzCore/CALayer.h>


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

Цей код можна використовувати для додавання UIImageViewмежі перегляду.


ідеально! Не потрібно переживати клопоту CGImage. (Мені не потрібно було зберігати зображення за межею). Дякую купу!
вересня 1616

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

Блискучий злом, особливо якщо мова йде про використання пам'яті - інші відповіді потребуватимуть 2x пам'яті лише для того, щоб миттєво додати цю межу. Порада - якщо ви хочете лише додати рамку на одній стороні, ви також можете змінити межі. Чудова відповідь!
judepereira

11

Якщо ви знаєте розміри вашого зображення, то додавання рамки до шару UIImageView є найкращим рішенням AFAIK. Infact, ви можете просто встановитиFrame your imageView на x, y, image.size.width, image.size.height

Якщо у вас є ImageView фіксованого розміру з динамічно завантаженими зображеннями, які отримують розмір (або масштабують до AspectFit), то ваша мета - змінити розмір перегляду зображення на новий розмір зображення.

Найкоротший спосіб зробити це:

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

Але для використання AVMakeRectWithAspectRatioInsideRect вам потрібно додати це

#import <AVFoundation/AVFoundation.h>

імпорт імпорту у ваш файл, а також включіть у свій проект рамку AVFoundation (постачається в комплекті з SDK).


Дякую @rafinskipg! Цінується.
ScorpionKing2k5

8

Ви не можете додати рамку, але це діятиме для того ж ефекту. Ви також можете перетворити UIView з назвою blackBG у цьому прикладі в UIImageView із рамкою зображення та порожньою серединою, і тоді у вас буде власна рамка зображення замість просто чорної.

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

Це те, що я закінчив робити; вклавши мою UIImageViewв центр трохи більшого UIViewкольору мого кадру.
Бен Крігер

6

всі ці відповіді чудово працюють, Але додайте зображення до прямої лінії. Припустимо, у вас є форма (в моєму випадку метелик), і ви хочете додати рамку (червону облямівку):

нам потрібні два кроки: 1) зробити зображення, перетворити на CGImage, перейти до функції малювання екрану в контексті за допомогою CoreGraphics і повернути новий CGImage

2) перетворити на назад uiimage і намалювати:

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

}

Я додав звичайного метелика і більшого метелика з червоною облямівкою.


чи можна тут встановити ширину червоної облямівки.
coder1010

5

Ви можете додати рамку до UIImageView, а потім змінити розмір UIimageView відповідно до розміру зображення:

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

Переконайтеся, що ви встановили початок imageView у центр


2

Ви можете маніпулювати самим зображенням, але набагато кращим способом є просто додати UIView, що містить UIImageView, і змінити фон на чорний. Потім встановіть розмір цього виду контейнера трохи більшим, ніж UIImageView.


Чи буде працювати з різними розмірами зображень, які змінюються на льоту? UIImageView буде постійно змінюватися, а UIView? ps Маніпулювати самим зображенням буде чудово.
Шай

Вам доведеться відрегулювати кадр, що містить подання, разом із зображенням - ви можете зберегти властивості центру для обох представлень даних, налаштувати розмір зображення, налаштувати розмір контейнера, а потім відновити властивості центру для обох.
Kendall Helmstetter Gelner

Це точно так, як я це зробив, на відміну від погладжування шляху CG. просто здалося легше.
Корі Флойд

2

Ще один спосіб - це зробити безпосередньо від дизайнера.

Виберіть своє зображення та перейдіть до розділу "Показати інспектора посвідчення особи".

Тут ви можете вручну додати " Визначені користувачем атрибути" :

layer.borderColor
layer.borderWidth


введіть тут опис зображення


1
Це не спрацює, як вам потрібен CGColor, і через XIB він надає лише UIColor
codenooker

Колір не буде працювати, але якщо вам просто потрібен чорний - це найбільш ефективна відповідь "рядків коду" = D
soprof

1

// вам потрібно імпортувати

QuartzCore/QuartzCore.h

& потім для ImageView у межі

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

[imageView.layer setBorderWidth: 2.0];

[imageView.layer setCornerRadius: 5.0];

1

Ця функція поверне вам зображення з чорною облямівкою, спробуйте це. Сподіваюся, це допоможе вам

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

Якщо ви знайшли якісь гліки, будь ласка, повідомте мене ... я вдосконалю його
SachinVsSachin

1

У Swift 3 ось як це зробити до самого 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

Для тих, хто шукає рішення підключення та відтворення на UIImage, я написав відповідь CodyMace як розширення.

Використання: 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

Я створив клас, який додає рамку до imageView h. Використовуйте цей клас замість UIImageView.Я дав прокладку з 4. Ви можете дати за вашим бажанням.

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

Я використовую цей метод, щоб додати рамку поза зображенням . Ви можете налаштувати ширину кордону в boderWidthпостійному.

Швидкий 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;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.