带渐变的圆形笔划质量差

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

我做错了什么？尝试线性、角度渐变

Answer 1

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

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

高质量

这个放大了缩小以匹配您所看到的尺寸。

低质量

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

你甚至可以在文本中看到差异。

---

完整的演示代码：

    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 修饰符通过代码对其进行缩放（如果您确实需要）