ばろぐ・ほいダウン

2010年Nゲージにより鉄道事業を開始。2011年Gゲージに参入することで事業拡大。常に夢と目標と野望を持ち活動していく。

MENU

SwiftUIで画像をいろんな形で表示してみる(.clipShape()と.mask()の使い方)

SwiftUIで表示させた画像をいろんな形で切り取ってみたいと思います。

前回の続きのような形で。

yotubarail.work

Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
        .clipped()
f:id:yotubarail:20200707133125p:plain

切り取る前の元はこの状態です。



.clipShape()の使い方

画像を円で表示

.clipShape()にCircle()を書くことで円で表示できます。

Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
        .clipShape(Circle())
f:id:yotubarail:20200707134218p:plain

円になりましたね。


画像を四角形で表示

.clipShape()にRectangle()を書くことで円で表示できます。

Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
        .clipShape(Rectangle())
f:id:yotubarail:20200707135011p:plain

元々が四角形の画像なので変化はありませんでした。


画像をカプセル形で表示

薬のカプセルのような形で画像を表示させることもできます。
その場合は.clipShape()にCapsule()を書きます。

Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
        .clipShape(Capsule())
f:id:yotubarail:20200707135452p:plain



画像を楕円形で表示

楕円形で表示させたい時は.clipShape()にEllipse()を書きましょう。

Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
        .clipShape(Ellipse())
f:id:yotubarail:20200707140530p:plain



画像を角丸四角形で表示

.clipShape()を使った切り取りの最後は、角が丸い四角形で表示させます。 RoundedRectangle(cornerRadius: )を書きます。
cornerRadiusの値は各自で好きなものを設定してください。

Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
        .clipShape(RoundedRectangle(cornerRadius: 50))
f:id:yotubarail:20200707141441p:plain


Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
  .cornerRadius(50)

としても良い気がします。


.mask()の使い方

続いて .mask()の使い方です。
System Imageなどを使って様々な形に切り取れます。

画像でmask

System Imageを使ってmask

System Imageとして、iOSでは簡単なアイコンのようなSF Symbolsが用意されています。
一覧はこちらからSF Symbolsアプリをダウンロードすることで確認できます。

Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
        .clipped()
        .mask(
                Image(systemName: "paperplane.fill")
                        .font(.system(size: 150))
                        .frame(width: 0)
        )
f:id:yotubarail:20200707145739p:plain

今回は紙飛行機の形に切り取ってみました。
切り取る部分のサイズは .font(.system(size: ))で設定できます。
.frame(width: 0)を書かないとうまく切り取れないので注意です。


Assetsに入れた画像でmask

Assetsに入れた画像でも切り取れます。

Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
        .clipped()
        .mask(
          Image("logo")
             .resizable()
//             .frame(width: 100, height: 100, alignment: .trailing)
             .scaledToFit()
        )
f:id:yotubarail:20200707151929p:plain

クローバーをイメージした四葉鉄道のロゴの形に切り取ってみました。
ロゴの大きさを変えようとしましたが、.frame()などが効かず変える方法がわかっていません。
わかり次第追記します。

できました。
.scaledToFit()の前に.frame()を追加すると変えられました。
コード部分にはコメントアウトで追記しておきました。
コードでは右寄せにしてあります。


テキストでmask

テキストで切り取ることも可能です。

Image("IMG_7310")
        .resizable()
        .scaledToFill()
        .frame(width: 350, height: 200)
        .clipped()
        .mask(
             Text("SwiftUI")
                   .font(.system(size: 90, weight: .heavy))
                   .frame(width: 0)
        )
f:id:yotubarail:20200707152450p:plain

テキストの線を太めにするとよく目立つと思います。