iPhone屏幕圆角continuous corner

您所在的位置：网站首页 › iphone圆角 › iPhone屏幕圆角continuous corner

iPhone屏幕圆角continuous corner

2023-09-25 11:05| 来源: 网络整理| 查看: 265

普通圆角与连续圆角

1.通过设置layer的cornerRaidus实现圆角(图1

btnview.layer.cornerRadius = 45 图1

2.设置layer的cornerCurve(图2 cornerCurve是iOS13新增的属性,有两个值, circular单一的圆角和continuous连续的圆角

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

3.通过贝塞尔曲线实现圆角(图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就是连续的圆角效果

但是UIBezierPath只有roundedRect可以生成连续圆角的CGPath,拼接BezierPath添加的arc是真正的圆弧,不是连续圆角,因此如果想在一个layer上实现不同半径的连续圆角,可能很麻烦不过视觉上其实看不太出来,除非像是开头的gif那样对比

这个例子是常规的方法,画了四个圆角,看上去也基本和屏幕对齐了

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 } 绘制贝塞尔曲线

【本文地址】

iPhone屏幕圆角continuous corner

iPhone屏幕圆角continuous corner

今日新闻

推荐新闻