CODEWITHSUNDEEP
swiftui
Steven-Carrot
Steven-Carrot

Reputation: 3051

How to fill a circle with two different colors?

I am trying to fill this circle with two colors 50%/50% half yellow half green, but i am not sure if this is possible.

struct MeetingView: View {
var body: some View {
    VStack {
        Circle()
            .strokeBorder(lineWidth: 24)
    }
    .padding()
}
}

circle to fill

Upvotes: 0

Views: 1390

Answers (2)

Lukas Simonson
Lukas Simonson

Reputation: 11

A good way you could fill the shape with a split would be to use a LinearGradient with stops so that the colors are full until they meet in the middle.

.fill() can take more than just a Color, it can take anything that conforms to the ShapeStyle protocol. So Gradients, Materials, and Colors just to name the big ones.

Circle()
    .fill(LinearGradient(stops: [.init(color: .red, location: 0.5), .init(color: .blue, location: 0.5)], startPoint: .leading, endPoint: .trailing))

This approach will save us from having to create a bunch of different shapes to accomplish the fill effect, and lets us add more colors super easily as well!

Side Note: You would still need to have 2 shapes in order to have both the fill and the stroke, at least without doing any extra extensions for Shape.

I'm not going to get into the specifics of how Gradients work, but if you want a good resource check out Hacking With Swift

Upvotes: 1

Steven-Carrot
Steven-Carrot

Reputation: 3051

Thanks to @Inder Kumar Rathore, I can make this worked

      ZStack {
        Circle()
            .trim(from: 0.5, to: 1)
            .fill(.blue)
        Circle()
            .trim(from: 0, to: 0.5)
            .fill(.red)
        Circle()
            .strokeBorder(lineWidth: 24)
      }

Upvotes: 5

Related Questions