CODEWITHSUNDEEP
iosswiftuibezierpathrounded-cornerscashapelayer
Cœur
Cœur

Reputation: 38667

1 px bordered UIBezierPath(roundedRect:byRoundingCorners:)

How to get a clean 1 px border for a UIBezierPath with different rounded corners?

In the below example, I have use 3 corners. Code is inside a UIView:

let borderLayer = CAShapeLayer()
borderLayer.frame = bounds
borderLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: [.topRight, .bottomLeft, .bottomRight], cornerRadii: CGSize(width: 24, height: 24)).cgPath
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.lineWidth = 1
borderLayer.strokeColor = UIColor.white.cgColor
layer.addSublayer(borderLayer)

The result has width issues in angles:

enter image description here

Upvotes: 1

Views: 294

Answers (1)

JonJ
JonJ

Reputation: 1061

Inset by 1 pixel, or set clipsToBounds = false in your UIView.

let insetBounds = bounds.insetBy(dx: 1.0, dy: 1.0)
borderLayer.path = UIBezierPath(roundedRect: insetBounds, byRoundingCorners: [.topRight, .bottomLeft, .bottomRight], cornerRadii: CGSize(width: 24, height: 24)).cgPath

Upvotes: 4

Related Questions