【SwiftUI】画像の加工処理(切り抜き/影/ぼかし)

本記事では、画面上に表示した画像を切り抜いたり、ぼかしを入れたりするなどの画像を加工する方法について解説していきます。

Imageオブジェクトの基本的な使用方法について知りたい方は下の記事を参照して見てください！

2023.07.20

https://jinluvman.com/archives/2023/07/20/1443

本記事では、SwiftUIで使用できるImageオブジェクトの使い方とモディファイアについて解説していきます。任意の画像を表示まずはImageオブジェクトを使用して、任意の画像を表示させる方法を解説していきます。今回は景色の画像を表示させますが、そのためにはまず対象となる画像をXcodeにアップロードします。画像をアップロードするにはまずプロジェクト画面の左側にある「Assets」を選択します。その後、ローカルのmac上から使用したい画像をドラッグ&ドロップで画面中央の「No selection」と表示されている位置に配置します。...

1. 画像の切り抜き
2. 画像をぼかす
3. 画像に影をつける
4. 画像をグレースケールにする
5. 最後に

画像の切り抜き

画像を指定した図形の形に切り抜いて表示する方法や文字列の形に切り抜いて表示する方法などを紹介していきます。

画像の形は「clipshape()」を用いることで指定した図形の形で切り抜いて変形させることができます。

今回は以下の図形を使用して形を色々変更させていきます。

VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
            
        }

円形に切り抜く

画像を円の形に切り取る際には、clipshape()に対してCircle()を指定します。

画像サイズの変換などを可能にするためのresizable()よりも先に、clipshape()を指定することができない点には注意が必要です。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .clipShape(Circle())
            
        }
        .padding()
    }

四角形に切り抜く

元々の画像が四角形のためわかりにくいですが、画像を四角形に切り抜く際にはRectangle()を指定します。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .clipShape(Rectangle())
            
        }
        .padding()
    }

楕円形に切り抜く

画像を楕円形に切り取る際には、Ellipse()を指定します。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .clipShape(Ellipse())
        }
        .padding()
    }

楕円の形状は画像に指定している高さと幅に依存しており、上記の例では、横に長い楕円となっていますが、縦に長い楕円を指定することも可能です。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 500)
                .clipShape(Ellipse())
        }
        .padding()
    }

カプセル型に切り抜く

画像をカプセル型に切り抜く際にはCapsule()を指定します。

カプセル型は高さと幅のうち、短い方の辺が円形となるため、任意に縦のカプセル型と横のカプセル型を使い分けることが可能です。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .clipShape(Capsule())
        }
        .padding()
    }

文字列の形に切り抜く

画像を指定した文字列の形に切り抜くことも可能です。

文字列の形に切り抜く際には、図形の形に切り抜く際に使用していたclipShapeではなく、mask()を使用します。mask()内で指定したテキストの形に対象の画像を切り取って表示します。

画像を「SwiftUI」という文字列に切り取って表示してみます。おしゃれな文字列が表示されることが確認できます。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .mask(
                    Text("SwiftUI")
                        .font(.system(size: 90, weight: .heavy))
                )
        }
        .padding()
    }

また、mask()内にシステム画像を指定することでシステム画像の形に画像を切り抜くことも可能です。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .mask(
                    Image(systemName: "figure.mixed.cardio")
                        .font(.system(size: 200))
                )
        }
        .padding()
    }

画像をぼかす

blur()を使用することで、画像をぼかして表示することが可能になります。

blur()には引数でradiusを指定する必要があり、radiusに指定した数値の大きさによってぼかし具合が変化します。数値が大きくなるほど画像がぼやけていきます。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .blur(radius: 3)
        }
        .padding()
    }

blur(radius: 3)を指定した場合

blur(radius: 10)を指定した場合

また、blur()では第2引数にopaqueを指定し、画像の境界値をぼかすかどうかを指定することができます。opaqueには真偽値を設定することができ、trueの場合には境界値をくっきりと表示することができ、falseでは画像の境界値を含め全体をぼかすことができます。

第2引数のopaqueを指定しない場合には、デフォルトでopaque: falseが設定されている状態となり、画像の境界値を含む全体がぼやけた状態になります。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .blur(radius: 3, opaque: true)
        }
        .padding()
    }

画像に影をつける

画像に影をつけるには、shadow()を使用します。shadow(color:色, radius: 影の大きさの数値)のような形式で、影の色と、影の大きさを指定することができます。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .shadow(color: .blue, radius: 20)
        }
        .padding()
    }

画像をグレースケールにする

画像をグレースケールにする際には、grayscale()を使用します。引数には、0.0~1.0の範囲で数値を指定することができ、1.0に数値が近づくほどグレイスケールに近づきます。

グレイスケールは白黒とは違い、白・黒・グレーの三色を用いた表現方法になります。

var body: some View {
        VStack {
            Image("fireworks01")
                .resizable()
                .scaledToFill()
                .frame(width: 350, height: 200)
                .grayscale(1.0)
        }
        .padding()
    }

1.0を設定した場合