Circular crown with UIBezierPath

Question

I'am trying draw a circular crown with UIBezierPath. I can draw two circle with two diferent radius:

let bezierCrown = UIBezierPath()
bezierCrown.addArc(withCenter: center,
                       radius: raidus1,
                   startAngle: 0,
                     endAngle: CGFloat.pi*2,
                    clockwise: true)
bezierCrown.move(to: CGPoint(x: center.x+distancia2, y: center.y))
bezierCrown.addArc(withCenter: center,
                       radius: raidus2,
                   startAngle: 0,
                     endAngle: CGFloat.pi*2,
                    clockwise: true)

But when I fill:

UIColor.green.setFill()
bezierCrown.fill()

Everything is filled: image. I want only the crown to be filled.

user_3021161 · Answer

You need to set the fillRule to evenOdd

let center = CGPoint(x: 200, y: 400)
        let raidus1:CGFloat = 100
        let raidus2:CGFloat = 80
        
        let bezierCrown = UIBezierPath()
        bezierCrown.addArc(withCenter: center,
                           radius: raidus1,
                           startAngle: 0,
                           endAngle: CGFloat.pi*2,
                           clockwise: true)
        bezierCrown.move(to: CGPoint(x: center.x+raidus2, y: center.y))
        bezierCrown.addArc(withCenter: center,
                           radius: raidus2,
                           startAngle: 0,
                           endAngle: CGFloat.pi*2,
                           clockwise: true)
        
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = bezierCrown.cgPath
        shapeLayer.fillColor = UIColor.blue.cgColor
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.fillRule = .evenOdd
        
        view.layer.addSublayer(shapeLayer)

Circular crown with UIBezierPath

1 Answers