I'm trying to apply a glass effect on a circle stroke but all it does is apply it to the circle itself and not the stroke:
import SwiftUI
let kCarouselCircleSize: CGFloat = 150
let kCarouselOpacity: Double = 0.3
let kCarouselStrokeWidth: CGFloat = 60
struct ContentView: View {
@State var showing = false
var body: some View {
VStack(spacing: 60) {
Text("ultraThinMaterial:")
.font(.title)
CarouseCircle(drawProgress: 0.7, isActive: false)
Text("glassEffect()")
.font(.title)
CarouseCircle(useGlassEffect: true, drawProgress: 0.7, isActive: false)
}
.background(content: {
Image(.background2)
})
.padding()
}
}
struct CarouseCircle: View {
var size: CGFloat = kCarouselCircleSize
var strokeWidth: CGFloat = kCarouselStrokeWidth
var useGlassEffect: Bool = false
var drawProgress: CGFloat
var isActive: Bool
var body: some View {
if useGlassEffect {
Circle()
.trim(from: 0, to: drawProgress)
.fill(.clear)
.stroke(.blue, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
.frame(width: size, height: size)
.glassEffect()
.shadow(color: .black.opacity(kCarouselOpacity), radius: isActive ? 4 : 1, x: 0, y: 0)
.rotationEffect(.degrees(-90)) // Start drawing at button 1's position
} else {
Circle()
.trim(from: 0, to: drawProgress)
.fill(.clear)
.stroke(.ultraThinMaterial, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
.frame(width: size, height: size)
.shadow(color: .black.opacity(kCarouselOpacity), radius: isActive ? 4 : 1, x: 0, y: 0)
.rotationEffect(.degrees(-90)) // Start drawing at button 1's position
}
}
}
Here's the result:
Is this supported, a bug or something I'm doing wrong?
