画像(Imageビュー)に限った話ではないが、SwiftUIではクリッピングとマスキングについていくつかのモディファイアが用意されている。

ビューの切り取り

clippedモディファイアでは、ビューをフレームの境界でクリッピング(切り取り)することができる。

Image("face_icon")
    .frame(width: 100, height: 100)
    .border(Color.black)
    .clipped()
切り取り前
切り取り後

切り取り形状を指定する

clipShapeモディファイアを使えば、ビューの切り取り形状を指定することができる。

今回は円のシェイプ、Circleを使って切り取ってみた。

Image("bg_image")
    .clipShape(Circle())

ビューのマスキング

マスキングはmaskモディファイアを使っておこなうことができ、今回は二つの画像を用意して背景画像を文字の画像でマスキングする例を見ていく。

Image("bg_image")
    .mask(
        Image("text_image")
    )

夜景の画像bg_imageと、文字の画像text_imageを使ってmaskモディファイアを設定すると、以下のようにmask内で指定した文字画像の塗り部分でマスクされ、以下のようなデザインを実現することができる。