Created
May 17, 2021 11:02
-
-
Save AndyQ/83b82963075f16fb1128eb31dd8466bc to your computer and use it in GitHub Desktop.
Simple SwiftUI view that draws a bordered rounded rectangle that allowes you to pick which corner is rounded and also allow borders to be not show if both corners on a side are not rounded
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
struct ContentView: View { | |
var body: some View { | |
Color.clear | |
.foregroundColor(.white) | |
.frame( width:100, height:100) | |
.font(.largeTitle) | |
.padding(20) | |
.background(RoundedCorners(color: .blue, tl: 10, tr: 0, bl: 10, br: 0, left:true, right:false)) | |
} | |
} | |
struct ContentView_Previews: PreviewProvider { | |
static var previews: some View { | |
ContentView() | |
} | |
} | |
struct RoundedCorners: View { | |
var color: Color = .blue | |
var tl: CGFloat = 0.0 | |
var tr: CGFloat = 0.0 | |
var bl: CGFloat = 0.0 | |
var br: CGFloat = 0.0 | |
var top: Bool = true | |
var bottom: Bool = true | |
var left: Bool = true | |
var right: Bool = true | |
var body: some View { | |
GeometryReader { geometry in | |
Path { path in | |
let w = geometry.size.width | |
let h = geometry.size.height | |
// Make sure we do not exceed the size of the rectangle | |
let tr = min(min(self.tr, h/2), w/2) | |
let tl = min(min(self.tl, h/2), w/2) | |
let bl = min(min(self.bl, h/2), w/2) | |
let br = min(min(self.br, h/2), w/2) | |
path.move(to: CGPoint(x: w / 2.0, y: 0)) | |
path.addLine(to: CGPoint(x: w - tr, y: 0)) | |
path.addArc(center: CGPoint(x: w - tr, y: tr), radius: tr, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 0), clockwise: false) | |
path.addLine(to: CGPoint(x: w, y: h - br)) | |
path.addArc(center: CGPoint(x: w - br, y: h - br), radius: br, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 90), clockwise: false) | |
path.addLine(to: CGPoint(x: bl, y: h)) | |
path.addArc(center: CGPoint(x: bl, y: h - bl), radius: bl, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 180), clockwise: false) | |
path.addLine(to: CGPoint(x: 0, y: tl)) | |
path.addArc(center: CGPoint(x: tl, y: tl), radius: tl, startAngle: Angle(degrees: 180), endAngle: Angle(degrees: 270), clockwise: false) | |
} | |
.fill(self.color) | |
Path { path in | |
let w = geometry.size.width | |
let h = geometry.size.height | |
// Make sure we do not exceed the size of the rectangle | |
let tr = min(min(self.tr, h/2), w/2) | |
let tl = min(min(self.tl, h/2), w/2) | |
let bl = min(min(self.bl, h/2), w/2) | |
let br = min(min(self.br, h/2), w/2) | |
path.move(to: CGPoint(x: 0 + tl, y: 0)) | |
if tl != 0 || tr != 0 || top == true { | |
path.addLine(to: CGPoint(x: w - tr, y: 0)) | |
path.addArc(center: CGPoint(x: w - tr, y: tr), radius: tr, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 0), clockwise: false) | |
} else { | |
path.move(to: CGPoint(x: w, y: 0)) | |
} | |
if tr != 0 || br != 0 || right == true { | |
path.addLine(to: CGPoint(x: w, y: h - br)) | |
path.addArc(center: CGPoint(x: w - br, y: h - br), radius: br, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 90), clockwise: false) | |
} else { | |
path.move(to: CGPoint(x: w, y: h)) | |
} | |
if br != 0 || bl != 0 || bottom == true { | |
path.addLine(to: CGPoint(x: bl, y: h)) | |
path.addArc(center: CGPoint(x: bl, y: h - bl), radius: bl, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 180), clockwise: false) | |
} else { | |
path.move(to: CGPoint(x: 0, y: h)) | |
} | |
if bl != 0 || tl != 0 || left == true { | |
path.addLine(to: CGPoint(x: 0, y: tl)) | |
path.addArc(center: CGPoint(x: tl, y: tl), radius: tl, startAngle: Angle(degrees: 180), endAngle: Angle(degrees: 270), clockwise: false) | |
} | |
} | |
.stroke(Color.black, lineWidth: 2) | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment