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))
我做错了什么?尝试线性、角度渐变
答案 0 :(得分: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
修饰符通过代码对其进行缩放(如果您确实需要)