当半径等于高度时,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
这里是测试代码,大家可以复制测试:
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