SwiftUI set corner radius depending on its own height

Question

When I set corner radius with constant value, depending on the size of the image, the results don't come out the way I want.

Image(“myImage”)
    .cornerRadius(25)

What I want in app. More clipped in Widget So I want to set radius value like image.size.height / 5, depending on its own size.

When I think about overlay, code will be like below,

Image("myImage")
.overlay(
    GeometryReader { geo in
        RoundedRectangle(cornerRadius: geo.size.height / 5)
    }
)

but when it comes to clipShape to apply corner radius, I don't know how to do.

https://www.hackingwithswift.com/quick-start/swiftui/how-to-clip-a-view-so-only-part-is-visible — Abizern, Jul 18 '21 at 15:10
Your problem is not clear. Please add more code that you use and write what effect you are trying to achieve. For now I can only guess that `.aspectRatio(1, contentMode: .fit)` will solve issue of different previews. — Valerika, Jul 22 '21 at 06:53

score 0 · Answer 1 · answered May 03 '22 at 18:16

Try using clip shape with Circle as shape - Using it with an aspect ratio will give you a perfectly square image and content mode will make sure the image fits perfectly.

Use something like this -

Image(“myImage”)
    .aspectRatio(1, contentMode: .fit)
    .clipShape(Circle())

SwiftUI set corner radius depending on its own height

1 Answers1