带渐变的圆形描边质量差

Question

 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))

尝试在 .stroke 初始值设定项中设置渐变，尝试使用 .fill(Gradient..) 我的圆圈描边看起来像素化了。当只使用一种颜色时 (foregraundColor(Color..) 一切正常。My gradient: AngularGradient(gradient: Gradient(colors: [CustomColors.red, CustomColors.pink]), center: .center, angle: .degrees(270))

我做错了什么？尝试线性，angular 渐变

Answer 1

您好像放大了。请尝试更大的形状以获得更好的质量。

比较这两个视觉上相同的环，看看缩放 in 和 out 的区别：

高质量

这个放大了 out 以匹配您看到的尺寸。

低质量

这个放大了以匹配您看到的大小。

即使在文字中也能看出区别。

完整演示代码：

    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)
        }
    }

注意您可以使用 .scaleEffect 修饰符通过代码对其进行缩放（如果确实需要的话）

带渐变的圆形描边质量差

Bad quality of circle stroke with gradient

swiftui

stroke

高质量

低质量