普通圓角與連續(xù)圓角

1.通過(guò)設(shè)置layer的cornerRaidus實(shí)現(xiàn)圓角(圖1

btnview.layer.cornerRadius = 45

圖1

2.設(shè)置layer的cornerCurve(圖2
cornerCurve是iOS13新增的屬性,有兩個(gè)值, circular單一的圓角和continuous連續(xù)的圓角

btnview.layer.cornerRadius = 45
btnview.clipsToBounds = true

圖2

3.通過(guò)貝塞爾曲線實(shí)現(xiàn)圓角(圖3

let bep = UIBezierPath.init(roundedRect: .init(x: 0, y: 0, width: width, height: 100), byRoundingCorners: [.bottomLeft] , cornerRadii: .init(width: 45, height: 45))
let layer = CAShapeLayer.init()
layer.frame = .init(x: 0, y: 0, width: width, height: 100)
layer.path = bep.cgPath
btnview.layer.mask = layer

圖3

圖2和圖3就是連續(xù)的圓角效果

但是UIBezierPath只有roundedRect可以生成連續(xù)圓角的CGPath,拼接BezierPath添加的arc是真正的圓弧,不是連續(xù)圓角,因此如果想在一個(gè)layer上實(shí)現(xiàn)不同半徑的連續(xù)圓角,可能很麻煩
不過(guò)視覺(jué)上其實(shí)看不太出來(lái),除非像是開(kāi)頭的gif那樣對(duì)比

這個(gè)例子是常規(guī)的方法,畫了四個(gè)圓角,看上去也基本和屏幕對(duì)齊了

func getbtnview(_ type:Int) -> UIView{
            let width = (screenWidth - 30.0) / 2.0
            let btnview = UIView.init()
//            let bep = UIBezierPath.init(roundedRect: .init(x: 0, y: 0, width: width, height: 100), byRoundingCorners: type == 0 ? [.bottomLeft] : [.bottomRight], cornerRadii: .init(width: 45, height: 45))
            let bep = UIBezierPath.init()
            bep.move(to: .init(x: 5, y: 0))
            bep.addArc(withCenter: .init(x: 5, y: 5), radius: 5, startAngle: .pi/2, endAngle: .pi, clockwise: false)
            if type == 0{
                bep.addLine(to: .init(x: 0, y: 15))
                bep.addArc(withCenter: .init(x: 45, y: 15), radius: 45, startAngle: .pi, endAngle: .pi/2, clockwise: false)
                bep.addLine(to: .init(x: width - 5, y: 60))
                bep.addArc(withCenter: .init(x: width - 5, y: 55), radius: 5, startAngle: .pi*1.5, endAngle: .pi*2, clockwise: false)
            }else{
                bep.addLine(to: .init(x: 0, y: 55))
                bep.addArc(withCenter: .init(x: 5, y: 55), radius: 5, startAngle: .pi, endAngle: .pi/2, clockwise: false)
                bep.addLine(to: .init(x: width - 45, y: 60))
                bep.addArc(withCenter: .init(x: width - 45, y: 15), radius: 45, startAngle: .pi*1.5, endAngle: .pi*2, clockwise: false)
            }
            bep.addLine(to: .init(x: width, y: 5))
            bep.addArc(withCenter: .init(x: width - 5, y: 5), radius: 5, startAngle: .pi*2, endAngle: .pi*1.5, clockwise: false)
            bep.addLine(to: .init(x: 5, y: 0))
            let layer = CAShapeLayer.init()
            layer.frame = .init(x: 0, y: 0, width: width, height: 100)
            layer.path = bep.cgPath
            btnview.layer.mask = layer
            view.addSubview(btnview)
            btnview.snp.makeConstraints { make in
                if type == 0{
                    make.leading.equalToSuperview().offset(10)
                }else{
                    make.trailing.equalToSuperview().offset(-10)
                }
                make.bottom.equalToSuperview().offset(-10)
                make.width.equalTo(width)
                make.height.equalTo(60)
            }
            return btnview
        }

繪制貝塞爾曲線