当半径等于高度时,UIBezierPath 角没有显示正确

UIBezierPath corner didn't show correct when radius equalTo height

这里是测试代码,大家可以复制测试:

override func viewDidLoad() {
    super.viewDidLoad()
    
    let blueView = UIView(frame: .init(x: 20, y: 100, width: 100, height: 40))
    blueView.backgroundColor = .blue
    view.addSubview(blueView)
    let blueViewPath = UIBezierPath.init(roundedRect: blueView.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: .init(width: 20, height: 20))
    let blueViewLayer = CAShapeLayer()
    blueViewLayer.frame = blueView.bounds
    blueViewLayer.path = blueViewPath.cgPath
    blueView.layer.mask = blueViewLayer
    
    let orangeView = UIView(frame: .init(x: 20, y: 150, width: 100, height: 40))
    orangeView.backgroundColor = .orange
    view.addSubview(orangeView)
    let orangeViewPath = UIBezierPath.init(roundedRect: orangeView.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: .init(width: 40, height: 40))
    let orangeViewLayer = CAShapeLayer()
    orangeViewLayer.frame = orangeView.bounds
    orangeViewLayer.path = orangeViewPath.cgPath
    orangeView.layer.mask = orangeViewLayer
}

blueView和orangeView的高度都是40,blueView的半径是20,orangeView的半径是40。

但是正如您所见,orangeView 的半径看起来像 20。

为什么?如何解决?

根据Apple Documentation请仔细阅读才知道为什么会这样

bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:

The radius of each corner oval. Values larger than half the rectangle’s width or height are clamped appropriately to half the width or height.

解决方案:

let orangeView = UIView(frame: .init(x: 150, y: 100, width: 260, height: 40))
orangeView.backgroundColor = .orange
view.addSubview(orangeView)
let orangeViewPath = UIBezierPath.init(roundedRect: .init(x: 0, y: -40, width: 260, height: 80), byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: .init(width: 40, height: 40))
let orangeViewLayer = CAShapeLayer()
orangeViewLayer.frame = orangeView.bounds
orangeViewLayer.path = orangeViewPath.cgPath
orangeView.layer.mask = orangeViewLayer