iOS：frame.size.width / 2不会在每个设备上生成一个圆圈 [英] iOS: frame.size.width/2 doesn't produce a circle on every device

问题描述

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

I'm aware that the formulae frame.size.width/2 should produce a circle border, however in XCode I am currently experiencing some discrepancies.

我有两个测试设备（iPhone6和第五代iPod touch）我也在运行模拟器。我的设备都显示正确，但模拟器将我的圆圈绘制为圆角矩形：

I have two test devices (iPhone6 and 5th gen iPod touch) I also have the simulator running. Both my devices display correctly but the simulator draws my circle as a rounded rectangle:

我用来实现这个目的的代码（虽然非常简单）是：

The code I am using to achieve this (although very simple) is:

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

为什么会发生这种情况？这让我疯了！

Is there any reason why this is happening? It's driving me insane!

UPDATE 为了清除混淆， UIImageView 在我的故事板为 190x190 它还应用了 1：1 宽高比约束，以确保它保持比例宽度和高度。

UPDATE To clear confusion, the UIImageView is declared in my storyboard as 190x190 it also has a 1:1 aspect ratio constraint applied to it to ensure it maintains a proportional width and height.

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

UPDATE 2 To put any suspicions regarding my auto-layout constraints to bed, I have attached the below image which shows the constraints set for imgAvatar. As you can see a the width and height match and the AR is set to ensure it maintains that 1:1 ratio. I hope that clears up any further doubts

ANSWER Leonardo指出了一个非常实用且可重用的解决方案来解决这个问题，使用Swift扩展可以确保给定的UIImage总是正方形，因此总是产生一个圆圈，我在下面发布了Leonardo的解决方案：

ANSWER Leonardo pointed out an extremely practical and reusable solution to fix this problem, using Swift extensions one can ensure that a given UIImage is always square, thus always generating a circle, I have posted Leonardo's solution below:

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

推荐答案

你可以创建应用蒙版和边框的扩展名到达你的图像所以无论屏幕尺寸/比例如何都会一直工作：

You can create an extension to apply the mask and border straight to your image so it will always work disregarding the screen size / scale:

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

这篇关于iOS：frame.size.width / 2不会在每个设备上生成一个圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！