[SwiftUI]Image(画像)に円形の枠線をつけるには？

どうも、ちょげ(@chogetarou)です。

画像であるImageに丸い枠線をつける方法を紹介します。

方法

Imageに円形の枠線をつけるには、overlay修飾子を使います。

まず、Imageにoverlay修飾子を付与します。

overlay修飾子の引数には、Circleを指定します。

そして、Circleにstroke修飾子を付与します。

stroke修飾子の第１引数には枠線の色、第２引数「lineWidth」には枠線の太さを指定します。

Image("image")
    .overlay(
        Circle()
            .stroke(色, lineWidth: 太さ)
    )

overlay修飾子を使うことで、Imageに円形の枠線をつけることが出来ます。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "pencil")
                 .resizable()
                 .frame(width: 100, height: 100)
                 .overlay(
                    Circle()
                        .stroke(Color.red, lineWidth: 2)
                        .frame(width: 150, height: 150)
                 )
        }
    }
}