How can I make a custom BlurMaterial using blur modifier in Swift?

Viewed 30

I am trying to over come to making a custom BlurMaterial challenge, as you could read from question I am trying to make a custom BlurMaterial, the idea is simple, I am accessing the all available view and then trying to cut it and blur the cut part, but the issue happens when the blur radius goes up and up, the wired rectangular happens and it seems the blur got issue at edges the yellow rectangular, I think this issue could simply solved, as you can see the logic of codes works almost, need help to solve the wired rectangular issue and blur issue at edges the yellow rectangular when we increases the blur radius.

INFO: the issue of wired rectangular happens in macOS SwiftUI but the blur issue at edges the yellow rectangular happens in iOS and macOS SwiftUI. My target is macOS SwiftUI not just iOS SwiftUI.

struct ContentView: View {
    
    @State private var radius: CGFloat = 8.0
    @State private var opacity: CGFloat = 0.2
    @State private var accentColorOfBlurMaterial: Color = Color.black.opacity(0.5)
    @State private var backgroundColor: Color = Color.green
    
    @State private var offset: CGSize = CGSize.zero
    @State private var lastOffset: CGSize = CGSize.zero
    
    @State private var blurSize: CGSize = CGSize(width: 200.0, height: 200.0)
    
    var body: some View {
        
        let baseView = VStack {
            
            Button("Tap") { print("tapped!") }
            
            swift
            
            slider(label: "radius:", value: $radius, range: 0.0...50.0)
            
            slider(label: "opacity:", value: $opacity, range: 0.0...1.0)
            
        }
            .padding()
            .background(Color.yellow.cornerRadius(10.0))
            .padding(50.0)
            .background(backgroundColor)
            .fixedSize()
        
        return ZStack {
            
            baseView
            
            baseView
                .blur(radius: radius)
                .frame(width: blurSize.width, height: blurSize.height)
                .offset(x: -offset.width, y: -offset.height)
                .clipped()
                .contentShape(Rectangle())
                .overlay(accentColorOfBlurMaterial.opacity(opacity))
                .border(Color.black, width: 5.0)
                .offset(offset)
                .gesture(gesture)
                .onChange(of: radius, perform: { newValue in
                    print("blur radius =", newValue)
                })
            
        }

    }

    var swift: some View { return Image(systemName: "swift").resizable().scaledToFit().frame(width: 300.0).foregroundColor(Color.red) }
    
    func slider(label: String, value: Binding<CGFloat>, range: ClosedRange<CGFloat>) -> some View {
        return HStack { Text(label); Spacer(); Slider(value: value, in: range) }
    }
    
    private var gesture: some Gesture {
        return DragGesture(minimumDistance: .zero, coordinateSpace: .global)
            .onChanged { value in
                offset = CGSize(width: lastOffset.width + value.translation.width, height: lastOffset.height + value.translation.height)
            }
            .onEnded { value in
                lastOffset = CGSize(width: lastOffset.width + value.translation.width, height: lastOffset.height + value.translation.height)
                offset = lastOffset
            }
    }
}
0 Answers
Related