CODEWITHSUNDEEP
macosswiftui
stephen
stephen

Reputation: 597

Is it possible to remove black effect around the four edges when increase the blur radius in SwiftUI under macOS?

I'm using .blur(radius:) modifier to get a visual effect on macOS when using SwiftUI, but the problem is when the radius increased, there's a very ugly black effect on the four edges, pls see below,

.blur(radius: 30)

enter image description here

.blur(radius: 0)

enter image description here

Here is the code:

           ZStack {
            weatherInformation.bkgImage
                .resizable()
                .blur(radius: 30) //blur visual effect
            
            HStack(spacing: 0) {
                TemperatureWeatherView()
                
                LiveDetailsCollectionView()
                    .frame(width: geometryWidth / 2, height: geometryHeight / 2)
            }
            
            DismissButton()
                .padding(.trailing, 4)
                .padding(.top, 4)
        }

So, is it possible to keep the radius big, like over 30, but without black edges?

Upvotes: 2

Views: 426

Answers (1)

Asperi
Asperi

Reputation: 257729

It is an effect of consuming (for blurring) pixels from outsize of visible frame (which is by default black), so to compensate this effect the possible approach might be to use some explicit background which is wider than image, or extend image itself, like

    weatherInformation.bkgImage
        .resizable()
        .background(Color.white.padding(-30))     // << this !!
        .blur(radius: 30)
//      .padding(-30)                         // << or this !!

also you can use .systemBackgroundColor above instead of white (or experiment with any you want).

Upvotes: 2

Related Questions