iam unsing a UiKit Image picker and trying to setup an Profil Pic for the User. Everything's works fine, the image gets displayed. But iam trying to make it into a Circle. I Tried using clipShape with an circle but it doesn't work. i followed the tutorial "My Images 1: Photo Picker and Camera in SwiftUI"

struct ProfileView: View {

@EnvironmentObject var appUser: User
@EnvironmentObject var appInfo: AppInformation

var body: some View {
    
    ZStack {
Rectangle()
            .frame(width: 400, height: 720)
    .cornerRadius(50)
    .foregroundColor(.gray)
    .overlay(
        
    HStack {
        
        if let image = appUser.profilBild {
    Image(uiImage: image)
            .resizable()
            .frame(width: 100, height: 100)
            .scaledToFill()
            .clipShape(RoundedRectangle(cornerRadius: 15))
            .overlay(Circle().stroke(Color.orange, lineWidth: 10))
            .onTapGesture {
                appInfo.source = .library
                appInfo.showPicker = true
            }
            .padding(20)
            .shadow(radius: 10)
            .overlay(
                ZStack{
                    Rectangle()
                        .frame(width: 20, height: 20)
                        .offset(x: 35, y: -35)
                        .foregroundColor(.white)
                Image(systemName: "plus.circle.fill")
                    .resizable()
                    .frame(width: 30, height: 30)
                    .offset(x: 35, y: -35)
                    .foregroundColor(.blue)
                    .shadow(radius: 10)
                }
            )
        }
        else {
    Image(systemName: "person.circle")
            .resizable()
            .frame(width: 100, height: 100)
            .onTapGesture {
                appInfo.source = .library
                appInfo.showPicker = true
            }
            .padding(20)
            .shadow(radius: 10)
            .overlay(
                ZStack{
                    Rectangle()
                        .frame(width: 20, height: 20)
                        .offset(x: 35, y: -35)
                        .foregroundColor(.white)
                Image(systemName: "plus.circle.fill")
                    .resizable()
                    .frame(width: 30, height: 30)
                    .offset(x: 35, y: -35)
                    .foregroundColor(.blue)
                    .shadow(radius: 10)
                }
            )
        }
        
            VStack {
                Text(appUser.username)
                .font(.largeTitle)
                .frame(width: 240 ,alignment: .leading)
                .offset(x: -10, y: -25)
                .lineLimit(1)
                
                Text(appUser.name)
                .frame(width: 220, alignment: .leading)
                .offset(x: -15,y: -20)
                .lineLimit(1)
            }
            
        }
        .frame(width: 400, height: 720, alignment: .topLeading)
    )
    .padding()
        
        ZStack {
    Rectangle()
            .foregroundColor(.secondary)
            .frame(width: 380, height: 510)
            .cornerRadius(45)
        }
        .frame(width: 400, height: 700, alignment: .bottom)
        .padding()
        
    }
    .sheet(isPresented: $appInfo.showPicker) {
        ImagePicker(sourceType: appInfo.source == .library ? .photoLibrary : .camera, selectedImage: $appUser.profilBild)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
    }
}

CodePudding user response：

You were almost there :)

Your only mistake was the order you placed your modifiers. ORDER MATTERS!!

Place scaledToFill() and clipShape() before the frame modifier.

Like such:

.resizable()
.scaledToFill()
.clipShape(Circle())
.frame(width: size, height: size)