iOS:frame.size.width/2不会在每个设备上生成一个圆圈

Question

我知道公式frame.size.width/2应该产生一个圆形边框,但是在XCode中,我目前遇到了一些差异.

我有两个测试设备(iPhone6和第五代iPod touch)我也有模拟器运行.我的设备都显示正确,但模拟器将我的圆圈绘制为圆角矩形:

我用来实现这个(虽然非常简单)的代码是:

imgAvatar.layer.masksToBounds = true
imgAvatar.clipsToBounds = true
imgAvatar.layer.cornerRadius = imgAvatar.frame.size.width/2
imgAvatar.layer.borderWidth = 5
imgAvatar.layer.borderColor = UIColor.whiteColor().CGColor

有什么理由发生这种情况吗？这让我疯了!

更新为了清除混淆,UIImageView在我的故事板中声明了190x190它,因为它还1:1应用了宽高比约束,以确保它保持比例宽度和高度.

更新2为了对我的自动布局约束产生任何疑虑,我附上了下面的图像,显​​示了为其设置的约束imgAvatar.如您所见,宽度和高度匹配,AR设置为确保它保持1:1的比例.我希望能够解决任何进一步的疑虑

答案莱昂纳多指出了一个非常实用且可重复使用的解决方案来解决这个问题,使用Swift扩展可以确保给定的UIImage总是方形的,因此总是生成一个圆圈,我已经在下面发布了Leonardo的解决方案:

extension UIImage {
    var circleMask: UIImage {
        let square = size.width < size.height ? CGSize(width: size.width, height: size.width) : CGSize(width: size.height, height: size.height)
        let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
        imageView.contentMode = UIViewContentMode.ScaleAspectFill
        imageView.image = self
        imageView.layer.cornerRadius = square.width/2
        imageView.layer.borderColor = UIColor.whiteColor().CGColor
        imageView.layer.borderWidth = 5
        imageView.layer.masksToBounds = true
        UIGraphicsBeginImageContext(imageView.bounds.size)
        imageView.layer.renderInContext(UIGraphicsGetCurrentContext())
        let result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return result
    }
}

imgAvatar.image = yourImage.circleMask

Answer 1

您可以创建一个扩展,将蒙版和边框直接应用于图像,这样它将始终无视屏幕大小/比例:

extension UIImage {
    var circleMask: UIImage {
        let square = CGSize(width: min(size.width, size.height), height: min(size.width, size.height))
        let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
        imageView.contentMode = UIViewContentMode.ScaleAspectFill
        imageView.image = self
        imageView.layer.cornerRadius = square.width/2
        imageView.layer.borderColor = UIColor.whiteColor().CGColor
        imageView.layer.borderWidth = 5
        imageView.layer.masksToBounds = true
        UIGraphicsBeginImageContext(imageView.bounds.size)
        imageView.layer.renderInContext(UIGraphicsGetCurrentContext())
        let result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return result
    }
}

imgAvatar.image = yourImage.circleMask

Answer 2

那么,Autolayout应该是问题所在.正如可以看到的高度imgAvatar上的权利是大于的高度imgAvatar上左边.

imgAvatar右边的尺寸是190 x 190,左边的尺寸是200 x 200,但是在左边,你设置的角半径是190/2,即95px,而它应该是100px.

如果您不希望imgAvatar按1:1调整大小,请在您的nib文件中设置高度和宽度约束.imgAvatar

1. 在你的笔尖中选择imgAvatar.
2. 编辑器> Pin>高度
3. 在你的笔尖中选择imgAvatar.
4. 编辑器> Pin>宽度

要么

尝试将代码移动到 viewDidLayoutSubviews

要么

对您进行子类化UIImageView并在其awakeFromNib方法中设置其角半径

如果有效,请告诉我们.谢谢!