IOS：UIImageView边框白色，半径在4个角显示一条奇怪的暗线

Posted 2023-03-10

【中文标题】IOS：UIImageView边框白色，半径在4个角显示一条奇怪的暗线

【英文标题】：IOS: UIImageView border white with radius display a strange dark line in 4 corners

【发布时间】：2016-03-23 10:02:06

【问题描述】：

我为ImageView 设置了白色边框和半径。但是在ImageView的4个角落，出现了一些暗线。 这是我为ImageView设置颜色的代码

self.image.layer.cornerRadius = 10;
self.image.layer.borderWidth = 3;
self.image.layer.borderColor = [[UIColor whiteColor] CGColor];
self.image.layer.masksToBounds = YES;

这是一个小型演示项目。我的故事板只包含ImageView，我没有为我的ImageView 设置任何约束。

我不知道为什么会这样，它在模拟器和真机上测试过，但它给出了同样的错误

这里是演示项目：（很简单）https://drive.google.com/file/d/0B_poNaia6t8kT0JLSFJleGxEcmc/view?usp=sharing

更新 有人给出的解决方案是将边框颜色的颜色从whiteColor 更改为clearColor。当然它会使 4 行消失。但如果我使用clearColor，我不需要为我的ImageView 添加边框。 出于某种原因，我需要白色边框

【问题讨论】：

您是否将 self.image 添加到任何子视图中

不，我只是把它拖到我的 mainStoryboard

@Anbu.Karthik 我已经添加了一个demo项目，如果你不介意，可以查看一下

其实你的图片太大了

查看这个答案：***.com/a/18515698/1949494

【参考方案1】：

更新代码

我试过你的代码实际上你的图像尺寸很大，我最初根据原始图像尺寸调整了图像大小

UIImage *myIcon = [self imageWithImage:[UIImage imageNamed:@"abc.jpg"] scaledToSize:CGSizeMake(400, 400)];
self.image.image = myIcon;

有时圆角半径不能正常工作，所以我使用UIBezierPath 来表示这个概念

 UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:self.image.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft | UIRectCornerBottomRight) cornerRadii:CGSizeMake(10.0, 10.0)];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.view.bounds;
maskLayer.path = maskPath.CGPath;
self.image.layer.mask = maskLayer;

边框颜色和宽度使用这个

斯威夫特 3

let maskPath = UIBezierPath(roundedRect: imageView.bounds, byRoundingCorners: ([.topLeft, .topRight, .bottomLeft, .bottomRight]), cornerRadii: CGSize(width: 10.0, height: 10.0))


    let borderShape = CAShapeLayer()
    borderShape.frame = self.imageView.bounds
    borderShape.path = maskPath.cgPath
    borderShape.strokeColor = UIColor.white.cgColor
    borderShape.fillColor = nil
    borderShape.lineWidth = 3
    self.imageView.layer.addSublayer(borderShape)

输出

更新

CAShapeLayer*   borderShape = [CAShapeLayer layer];
borderShape.frame = self.image.bounds;
borderShape.path = maskPath.CGPath;
borderShape.strokeColor = [UIColor whiteColor].CGColor;
borderShape.fillColor = nil;
borderShape.lineWidth = 3;
[self.image.layer addSublayer:borderShape];

斯威夫特

var borderShape: CAShapeLayer = CAShapeLayer.layer
borderShape.frame = self.image.bounds
borderShape.path = maskPath.CGPath
borderShape.strokeColor = UIColor.whiteColor().CGColor
borderShape.fillColor = nil
borderShape.lineWidth = 3
 self.image.layer.addSublayer(borderShape)

输出

whole project 的代码

【讨论】：

谢谢你，但你忘记了我与whiteColor 的边框3px。你能把它添加到代码中吗？我已将其添加到我的代码中，但显示不正确

@Anbu.Karthik 超级兄弟

【参考方案2】：

实际上你必须使用两层。

self.image.clipsToBounds = YES;
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.image.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(48, 48)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.image.bounds;
maskLayer.path = maskPath.CGPath;
maskLayer.strokeColor = [UIColor redColor].CGColor;

self.image.layer.mask = maskLayer;

CAShapeLayer*   frameLayer = [CAShapeLayer layer];
frameLayer.frame = self.image.bounds;
frameLayer.path = maskPath.CGPath;
frameLayer.strokeColor = [UIColor whiteColor].CGColor;
frameLayer.fillColor = nil;
frameLayer.lineWidth = 20;
[self.image.layer addSublayer:frameLayer];

【参考方案3】：

尝试剪辑到边界：

self.image.clipToBounds = YES

【参考方案4】：

我试过用imageview类写的这个函数：

- (void)setBorderWithRounCornersWithColor:(UIColor *)color

    self.layer.cornerRadius = 5.0f;
    self.layer.masksToBounds = YES;

    if(color)

        self.layer.borderColor=color.CGColor;
        self.layer.borderWidth=1.0f;
    

使用时：

[self.imageView setBorderWithRounCornersWithColor:nil];

【讨论】：

它不工作。 4 条暗线仍可见。如果您不介意，请查看我的演示项目（我已包含在问题中）

【参考方案5】：

我检查了您的代码，您可以更改此行对我的工作

self.image.layer.borderColor = [[UIColor clearColor] CGColor];

【讨论】：

如果我将边框的颜色设置为 clearColor，那么我不需要为我的ImageView添加边框

那么你必须设置边框宽度为0

:( 抱歉我的解释不好，但就我而言，它需要与whiteColor 而不是clearColor 的边框

【参考方案6】：

当您添加添加到图像边框线内的边框以及设置圆角边框时，您的圆角有一些透明部分，因此该部分将显示在角落侧 只需更改边框颜色的颜色

image1.layer.cornerRadius = 10;
image1.layer.borderWidth = 3;
image1.layer.borderColor = [[UIColor whiteColor] CGColor];
image1.layer.masksToBounds = YES;


image2.layer.cornerRadius = 10;
image2.layer.borderWidth = 3;
image2.layer.borderColor = [[UIColor clearColor] CGColor];
image2.layer.masksToBounds = YES;

【讨论】：

我的边框需要白色，而不是clearColor，如果您不介意，请查看我的演示项目（我已包含在问题中）

【参考方案7】：

最近遇到了同样的问题，但上下文略有不同。

带有难看的黑色边框的结果：

let image = UIImage(named: "File.png")!
let cornerRadius: CGFloat = 60
let frame = CGRect(origin: .zero, size: image.size)
let path = UIBezierPath(roundedRect: frame, cornerRadius: cornerRadius)
let rounded = UIGraphicsImageRenderer(size: image.size).image  context in
    path.addClip()
    image.draw(in: frame)

但如果我们将.insetBy(dx: 1, dy: 1) 添加到frame - 它会解决问题。