如何将图像塑造成圆形

Question

我正在取消 UiKit 图像选择器并尝试为用户设置个人资料图片。一切正常，图像得到显示。但我想把它变成一个圆圈。我尝试使用带圆圈的 clipShape，但它不起作用。我遵循了教程“我的图像 1：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)
    }
}

Answer 1

你快到了:)

你唯一的错误是你放置修饰符的顺序。订单很重要！！

将 scaledToFill() 和 clipShape() 放在框架修饰符之前。

像这样：

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

如何将图像塑造成圆形

How to shape an Image into an circle

xcode

ios

swift

swiftui