Round Specific Corners in a SwiftUI Mac App - macos

Question

I've been trying to figure out how to round specific corners of a SwiftUI View in a Mac app. All the solutions I can find (such as this) apply only to iOS since it has UIRectCorner. There is no NSRectCorner equivalent that I can find.
Back in the day, I would round a specific corner of an NSView like this:
layer?.cornerRadius = 5
layer?.maskedCorners = .layerMinXMinYCorner //Bottom-left corner
Has anyone found a way to round specific corners in a Mac app in SwiftUI?

Answer 1

and here comes the answer for macOS :)
// defines OptionSet, which corners to be rounded – same as UIRectCorner
struct RectCorner: OptionSet {
let rawValue: Int
static let topLeft = RectCorner(rawValue: 1 << 0)
static let topRight = RectCorner(rawValue: 1 << 1)
static let bottomRight = RectCorner(rawValue: 1 << 2)
static let bottomLeft = RectCorner(rawValue: 1 << 3)
static let allCorners: RectCorner = [.topLeft, topRight, .bottomLeft, .bottomRight]
}
// draws shape with specified rounded corners applying corner radius
struct RoundedCornersShape: Shape {
var radius: CGFloat = .zero
var corners: RectCorner = .allCorners
func path(in rect: CGRect) -> Path {
var path = Path()
let p1 = CGPoint(x: rect.minX, y: corners.contains(.topLeft) ? rect.minY + radius : rect.minY )
let p2 = CGPoint(x: corners.contains(.topLeft) ? rect.minX + radius : rect.minX, y: rect.minY )
let p3 = CGPoint(x: corners.contains(.topRight) ? rect.maxX - radius : rect.maxX, y: rect.minY )
let p4 = CGPoint(x: rect.maxX, y: corners.contains(.topRight) ? rect.minY + radius : rect.minY )
let p5 = CGPoint(x: rect.maxX, y: corners.contains(.bottomRight) ? rect.maxY - radius : rect.maxY )
let p6 = CGPoint(x: corners.contains(.bottomRight) ? rect.maxX - radius : rect.maxX, y: rect.maxY )
let p7 = CGPoint(x: corners.contains(.bottomLeft) ? rect.minX + radius : rect.minX, y: rect.maxY )
let p8 = CGPoint(x: rect.minX, y: corners.contains(.bottomLeft) ? rect.maxY - radius : rect.maxY )
path.move(to: p1)
path.addArc(tangent1End: CGPoint(x: rect.minX, y: rect.minY),
tangent2End: p2,
radius: radius)
path.addLine(to: p3)
path.addArc(tangent1End: CGPoint(x: rect.maxX, y: rect.minY),
tangent2End: p4,
radius: radius)
path.addLine(to: p5)
path.addArc(tangent1End: CGPoint(x: rect.maxX, y: rect.maxY),
tangent2End: p6,
radius: radius)
path.addLine(to: p7)
path.addArc(tangent1End: CGPoint(x: rect.minX, y: rect.maxY),
tangent2End: p8,
radius: radius)
path.closeSubpath()
return path
}
}
// View extension, to be used like modifier:
// SomeView().roundedCorners(radius: 20, corners: [.topLeft, .bottomRight])
extension View {
func roundedCorners(radius: CGFloat, corners: RectCorner) -> some View {
clipShape( RoundedCornersShape(radius: radius, corners: corners) )
}
}

Answer 2

Create a custom shape
import SwiftUI
struct RoundCorner: Shape {
// MARK: - PROPERTIES
var cornerRadius: CGFloat
var maskedCorners: UIRectCorner
// MARK: - PATH
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: maskedCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
return Path(path.cgPath)
}
}
// MARK: - PREVIEW
struct RoundCorner_Previews: PreviewProvider {
static var previews: some View {
RoundCorner(cornerRadius: 20, maskedCorners: .allCorners)
}
}
And Apply this shape to your view
import SwiftUI
struct SwiftUIView: View {
// MARK: - BODY
var body: some View {
Text("Hello, World!")
.padding()
.background(
Color.orange
)
.clipShape(
RoundCorner(
cornerRadius: 12,
maskedCorners: [.topLeft, .bottomRight]
)//OUR CUSTOM SHAPE
)
}
}
// MARK: - PREVIEW
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView()
}
}