【SwiftUI】角丸のImageに枠線をつける

角丸じゃない写真の場合

これは簡単にできる。

struct BorderImage: View {
    var body: some View {
        Image("monkey")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 350)
            .border(.red, width: 10)
    }
}

角丸の写真の場合

角丸部分のborderが消えてしまう。

struct BorderImage: View {
    var body: some View {
        Image("monkey")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 350)
            .border(.red, width: 2)
            .cornerRadius(50)
    }
}

overlayを使って実現する

struct BorderImage: View {
    var body: some View {
        Image("monkey")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 350)
            .cornerRadius(50)
            .overlay(
                RoundedRectangle(cornerRadius: 50)
                    .stroke(.red, lineWidth: 2)
            )
    }
}

おわりに

写真は何の関係もないです。