How would I draw an inverted rounded rectangle as shown below in Swift using a UIBezierPath? To clarify, I want to ONLY draw the shape in black.

CodePudding user response：

What I do is draw two views: the black rectangle, and the top region view with the curves (which I call a "roundyThingy"). So the only interesting part is how to draw the top region view. It too is just a black rectangle, but it has a mask that cuts out the roundy part. So the only really interesting part is the mask:

    let size = roundyThingy.bounds.size
    let renderer = UIGraphicsImageRenderer(size: size)
    let image = renderer.image { context in
        UIColor.black.setFill()
        context.fill(.init(origin: .zero, size: size))
        let path = UIBezierPath(
            roundedRect: .init(origin: .zero, size: size),
            byRoundingCorners: [.bottomLeft, .bottomRight],
            cornerRadii: .init(width: 12, height: 12)
        )
        path.fill(with: .clear, alpha: 1)
    }
    roundyThingy.mask = UIImageView(image: image)
    roundyThingy.mask?.frame = roundyThingy.bounds

CodePudding user response：

While most of us would simply put a white view with rounded corners on top of the black view, if you really want to draw that shape, create a UIBezierPath that consists of the upper left arc, the upper right arc, and the add lines to the two bottom corners. E.g.

let path = UIBezierPath(
    arcCenter: CGPoint(x: bounds.minX   cornerRadius, y: bounds.minY),
    radius: cornerRadius,
    startAngle: .pi,
    endAngle: .pi / 2,
    clockwise: false
)
path.addArc(
    withCenter: CGPoint(x: bounds.maxX - cornerRadius, y: bounds.minY),
    radius: cornerRadius,
    startAngle: .pi / 2,
    endAngle: 0,
    clockwise: false
)
path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
path.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
path.close()

There are a ton of ways to render this:

• Create CAShapeLayer with this path and use that as a mask (which I show below);
• Add this CAShapeLayer as a sublayer of the view’s layer;
• Create a UIImage using UIGraphicsImageRenderer, and fill that UIBezierPath;
• etc.

For example:

@IBDesignable class BottomView: UIView {
    @IBInspectable var cornerRadius: CGFloat = 15 { didSet { setNeedsLayout() } }

    override func layoutSubviews() {
        super.layoutSubviews()

        let path = UIBezierPath(
            arcCenter: CGPoint(x: bounds.minX   cornerRadius, y: bounds.minY),
            radius: cornerRadius,
            startAngle: .pi,
            endAngle: .pi / 2,
            clockwise: false
        )
        path.addArc(
            withCenter: CGPoint(x: bounds.maxX - cornerRadius, y: bounds.minY),
            radius: cornerRadius,
            startAngle: .pi / 2,
            endAngle: 0,
            clockwise: false
        )
        path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        path.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
        path.close()

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.fillColor = UIColor.white.cgColor // the color here is irrelevant; only used to define the mask

        layer.mask = shapeLayer
    }
}

That yields the following when I (a) add this BottomView to my view hierarchy; and (b) set the backgroundColor of this view to .black (or whatever you want):

I made this @IBDesignable so that I could either add it in Interface Builder storyboard, but you can also add it programmatically, too.

Or you can use this UIBezierPath with any of the patterns enumerated above. Whatever works for you.