Core AnimationCore Graphics
Last updated at 2023-09-11

Circle Stroke using CGContext Fill Rule EvenOdd with Sample Code

ClickUp
Note
AI Status
Last Edit By
Last edited time
Sep 11, 2023 09:26 AM
Metatag
Slug
cgcontext-fill-rule-even-odd
Writer
Published
Published
Date
Sep 11, 2023
Category
Core Animation
Core Graphics

Introduction

Have you ever wondered how to create a beautiful circular stroke effect in your iOS app, similar to what you see in Figma designs?
Look no further!
In this article, we'll explore how to implement a circular stroke effect using Core Animation in Swift.
We'll break down the code step by step, so you can easily understand and adapt it for your own projects.

Understanding the Circular Stroke Effect

Before diving into the code, let's take a moment to understand what we're trying to achieve.
The circular stroke effect typically consists of a colored ring (the "stroke") with a defined width, centered within a larger circle.
This effect creates an aesthetically pleasing visual element that can be used in various user interface components.

Implementing Circular Strokes with Core Animation

To create the circular stroke effect in your iOS app, we'll use Core Animation, a powerful framework for building animations and graphical effects.
Here's a breakdown of the Swift code you provided:
final class CircleStroke: CALayer {
    var width: CGFloat = 10
    var color: UIColor = .red

    override func draw(in ctx: CGContext) {
        super.draw(in: ctx)

        // Create the inner circle
        let innerCircle = UIBezierPath(
            ovalIn: bounds.insetBy(dx: width, dy: width))

        // Create the outer circle
        let outerCircle = UIBezierPath(ovalIn: bounds)

        // Set the fill color
        ctx.setFillColor(color.cgColor)

        // Add paths to the context
        ctx.addPath(outerCircle.cgPath)
        ctx.addPath(innerCircle.cgPath)

        // Use even-odd winding rule to clip the inner circle
        ctx.clip(using: .evenOdd)

        // Fill the outer circle with the specified color
        ctx.addPath(outerCircle.cgPath)
        ctx.fillPath()
    }
}
Let's break down the code step by step:
  1. CircleStroke is a custom subclass of CALayer. This class represents the circular stroke effect and provides properties to set the stroke's width and color.
  1. In the draw(in:) method, we start by creating two UIBezierPath objects: innerCircle and outerCircle. innerCircle represents the inner circular shape, while outerCircle represents the outer circular shape.
  1. We set the fill color of the graphics context (ctx) to the specified color.
  1. Both innerCircle and outerCircle paths are added to the context using ctx.addPath(). This allows us to manipulate and render them within the context.
  1. We use the even-odd winding rule with ctx.clip(using: .evenOdd) to create a clipping mask. This ensures that the inner circle is not filled with the specified color.
  1. Finally, we add the outerCircle path to the context again and fill it with the specified color, creating the circular stroke effect.

Implementing the Circular Stroke Effect

To use the CircleStroke class in your iOS app, follow these steps:
  1. Create an instance of CircleStroke.
  1. Set the width and color properties to customize the appearance of the circular stroke.
  1. Add the CircleStroke layer to a view's layer hierarchy, and it will automatically render the circular stroke effect.
Here's an example of how you can use CircleStroke:
let circleStroke = CircleStroke()
circleStroke.frame = CGRect(x: 50, y: 50, width: 100, height: 100)
circleStroke.width = 8
circleStroke.color = UIColor.blue.cgColor

view.layer.addSublayer(circleStroke)

Conclusion

With the provided Swift code and explanation, you now have the tools to implement a beautiful circular stroke effect in your iOS app using Core Animation.
This effect can enhance the visual appeal of your user interface and bring your designs to life.
Experiment with different colors and widths to create stunning visuals that align with your app's aesthetics.
Happy coding!

Discussion (0)

Related Posts