我怎样才能带一个UIImage并给它一个黑色边框？

126

如何设置边框UIImage？

iphone  ios  objective-c  uiimageview  uiimage 
— y
source
偶然地，如果有人登陆时通过Google搜索听到了声音（就像我一样），并且正在为UIImageView添加边框，请在底部通过@mclin查找答案。很棒！
— Mahendra Liya 2015年

Answers:

241

使用OS> 3.0，您可以执行以下操作：

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

[imageView.layer setBorderColor: [[UIColor blackColor] CGColor]];
[imageView.layer setBorderWidth: 2.0];
— 麦克林
source
1
当我在上述imageView中使图像适合时，可以完美地查看图像，但是图像的侧面留为空白，当图像为横向时，图像的上部和下部也会发生相同的情况。设置边框的空白看上去很难看。您是否遇到了这个问题？如果是，请提出解决此问题的方法
— 2012年
@Hamutsi imageView.image = myImage;
— 凯尔·克莱格
6
是的你可以。UIImage可以使用CoreGraphics将的实例绘制到图形上下文中。
— Mark Adams
正如@rockstar指出的那样，您可能需要添加imageView.layer.masksToBounds = YES;
— Bjorn Roche
该链接是我正在寻找的解决方案。
— 2014年
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并设置其边框。

— 马库斯·扎拉（Marcus S.Zarra）
source
如何指定所需边框的宽度？
— Patrick
16
CGContextSetLineWidth
— Marcus S. Zarra 2012年
@ MarcusS.Zarra我知道回答这个问题时它们并不存在，但是这种解决方案并未考虑视网膜显示屏。如果您可以修改它，我将非常感激:)
— 路加福音
@lukech样本无需修改。如果您使用的是视网膜设备，只需增加线宽即可。
— Marcus S. Zarra 2013年
2
size不管您是否在Retina设备上，它的大小均为320x480，因此，当您保存图像时，它将以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视图边框。

— Faizan Refai
source
完善！无需经历CGImage的麻烦。（我不需要保存带有边框的图像）。谢谢一群！
— Septronic's
13 
imageView_ProfileImage.layer.cornerRadius =10.0f;
imageView_ProfileImage.layer.borderColor = [[UIColor blackColor] CGColor];
imageView_ProfileImage.layer.borderWidth =.4f;
imageView_ProfileImage.layer.masksToBounds = YES;
— 比詹德拉·辛格（Bijendra Singh）
source
出色的技巧，尤其是在内存使用方面-其他答案将需要2倍的内存才能立即添加边框。专业提示-如果您只想在一侧添加边框，则也可以更改边界。好答案！
— judepereira
11

如果知道图像的尺寸，则在UIImageView的图层上添加边框是AFAIK的最佳解决方案。实际上，您只需将imageView设置为x，y，image.size.width，image.size.height

如果您有一个固定大小的ImageView带有动态加载的图像，这些图像将被调整大小（或缩放到AspectFit），那么您的目标是将imageview调整为新的调整大小的图像。

最简单的方法是：

// 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捆绑在一起）。

— 蝎子王2k5
source
谢谢@rafinskipg！非常感激。
— ScorpionKing2k5
8

您无法添加边框，但这可以达到相同的效果。您还可以在此示例中将名为blackBG的UIView制成具有边框图像和中间空白的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];
— 安德鲁·约翰逊（Andrew Johnson）
source
这就是我最终要做的；将我的图片嵌套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];

}

我加了一只普通的蝴蝶和一只红色的大蝴蝶。

— 英孔蒂
source
有什么办法可以在这里设置红色边框的宽度。
— coder1010 2013年
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的原点设置为中心

— 极点B
source
2

您可以操纵图像本身，但是更好的方法是简单地添加一个包含UIImageView的UIView，并将背景更改为黑色。然后，将该容器视图的大小设置为比UIImageView大一点。

— 肯德尔·赫尔姆斯特·盖尔纳
source
它可以与动态变化的不同大小的图像一起使用吗？UIImageView会一直更改，而UIView？ps操纵图像本身会很棒。
— 谢伊
您必须与图像一起调整包含视图的框架-您可以保存两个视图的中心属性，调整图像大小，调整容器大小，然后为两个视图重新设置中心属性。
— 肯德尔·赫尔姆斯特·盖尔纳
这恰好是我做到的方式，而不是通过CG摸索。似乎更容易。
— 科里·弗洛伊德
2

另一种方法是直接从设计师那里做。

选择您的图像，然后进入“显示身份检查器”。

在这里，您可以手动添加“ 用户定义的运行时属性”：

layer.borderColor
layer.borderWidth


在此处输入图片说明

— 卢卡·达万佐（Luca Davanzo）
source
1
这将无法正常工作，因为您需要CGColor，并且通过XIB它仅提供UIColor
— codenooker 2015年
颜色不起作用，但是如果您只需要黑色的颜色-这是最“代码行”的有效答案= D
— soprof
1

//您需要导入

QuartzCore/QuartzCore.h

＆然后用于边框中的ImageView

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

[imageView.layer setBorderWidth: 2.0];

[imageView.layer setCornerRadius: 5.0];
— 潘基
source
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;
}
— 萨钦VS萨钦
source
如果您发现任何故障，请让我知道...我会改善它
— 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
— 科迪·梅斯
source
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

    }

}
— 马夫里克·拉克索（Mavrick Laakso）
source
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 
}}
— 普拉纳夫·古普塔
source
-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;
}
— 米格尔·伊斯拉（Miguel Isla）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.