【问题标题】:UIBezierPath corner didn't show correct when radius equalTo height当半径等于高度时,UIBezierPath 拐角显示不正确
【发布时间】:2020-08-02 10:27:56
【问题描述】:

这里是测试代码,你可以复制测试一下:

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。

为什么?如何解决?

【问题讨论】:

    标签: ios swift uibezierpath


    【解决方案1】:

    根据Apple Documentation,请阅读以了解其这样做的原因

    bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:

    每个角椭圆的半径。大于一半的值 矩形的宽度或高度被适当地限制为一半 宽度或高度。

    【讨论】:

      【解决方案2】:

      解决方案:

      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
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-02-13
        • 1970-01-01
        • 1970-01-01
        • 2020-09-12
        • 2013-07-21
        相关资源
        最近更新 更多