画像をクリップする際、切り取られない部分をグレーアウトしたい

Question

こんにちは。

選択した画像をクリップする機能をアプリに追加しようとしています。

.clipShape(Circle())

を使用することで、以下のキャプチャのように円形に画像をくり抜くことはできるのですが、

選択されていない箇所を切り取るのではなく、
以下のキャプチャのように、半透明なviewを被せてあるような状態にしたいです。

何か方法をご存知の方がいらっしゃいましたら、ご教授ください。

Comments

[hoshi-takanori]

実際に半透明なビューを重ねれば良いのでは。

Answer 1

マスク用Imageを作って、写真とブレンドしてみてはいかがでしょう。
ブレンドのモードは乗算を選んでみました。

// マスク用Imageと写真を重ねてブレンドする
ZStack {
    // マスク用Image
    ZStack{
        Rectangle().foregroundColor(.gray).frame(width: 400, height: 400)
        Circle().foregroundColor(.white).frame(width: 400, height: 400)
    }
    // 写真
    Image("xxxxxxxx").resizable().frame(width: 400, height: 400).scaledToFit()
        .blendMode(.multiply)   // ブレンド（乗算）
}

Comments

[A.ESK]

とても良い感じに、実装することができました。ありがとうございます！