Search code examples
swiftuistroke

Bad quality of circle stroke with gradient

 Circle()
    .trim(from: viewModel.lenghts[index].from, to: viewModel.lenghts[index].to)
    .stroke(someGradient, style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
    .rotationEffect(Angle(degrees: 270.0))

Tried set a gradient in .stroke initializer, tried to use .fill(Gradient..) And my circle stroke looks pixelated. When use just a color (foregraundColor(Color..) all is ok. My gradient: AngularGradient(gradient: Gradient(colors: [CustomColors.red, CustomColors.pink]), center: .center, angle: .degrees(270))

What am I doing wrong? Tried linear, angular gradients

pixelated stroke

Solution

  • It seems like you've zoomed in. Try a bigger shape for better quality.

    Compare these two visually identical rings and see the difference of zooming in and out:

    High Quality

    This one zoomed out to match the size that you are seeing.

    High quality

    Low Quality

    This one zoomed in to match the size that you are seeing.

    Low quality

    You can see the difference even in the text.

    Full Demo code:

        var body: some View {
        ZStack {
            Text("Low quality")
                .font(.system(size: 8))

            Circle()
                .trim(from: 0.1, to: 0.9)
                .stroke(g, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
                .frame(width: 60, height: 60)
                .padding(8)
        }

        ZStack {
            Text("Hight quality")
                .font(.system(size: 50))

            Circle()
                .trim(from: 0.1, to: 0.9)
                .stroke(g, style: StrokeStyle(lineWidth: 60, lineCap: .round, lineJoin: .round))
                .frame(width: 400, height: 400)
                .padding(50)
        }
    }

    Note that you can use .scaleEffect modifier to scale it with code (if you really need to)