SwiftUIで表示させた画像をいろんな形で切り取ってみたいと思います。
前回の続きのような形で。
Image("IMG_7310") .resizable() .scaledToFill() .frame(width: 350, height: 200) .clipped()
切り取る前の元はこの状態です。
.clipShape()の使い方
画像を円で表示
.clipShape()にCircle()を書くことで円で表示できます。
Image("IMG_7310") .resizable() .scaledToFill() .frame(width: 350, height: 200) .clipShape(Circle())
円になりましたね。
画像を四角形で表示
.clipShape()にRectangle()を書くことで円で表示できます。
Image("IMG_7310") .resizable() .scaledToFill() .frame(width: 350, height: 200) .clipShape(Rectangle())
元々が四角形の画像なので変化はありませんでした。
画像をカプセル形で表示
薬のカプセルのような形で画像を表示させることもできます。
その場合は.clipShape()にCapsule()を書きます。
Image("IMG_7310") .resizable() .scaledToFill() .frame(width: 350, height: 200) .clipShape(Capsule())
画像を楕円形で表示
楕円形で表示させたい時は.clipShape()にEllipse()を書きましょう。
Image("IMG_7310") .resizable() .scaledToFill() .frame(width: 350, height: 200) .clipShape(Ellipse())
画像を角丸四角形で表示
.clipShape()を使った切り取りの最後は、角が丸い四角形で表示させます。
RoundedRectangle(cornerRadius: )を書きます。
cornerRadiusの値は各自で好きなものを設定してください。
Image("IMG_7310") .resizable() .scaledToFill() .frame(width: 350, height: 200) .clipShape(RoundedRectangle(cornerRadius: 50))
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) )
今回は紙飛行機の形に切り取ってみました。
切り取る部分のサイズは .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() )
クローバーをイメージした四葉鉄道のロゴの形に切り取ってみました。
ロゴの大きさを変えようとしましたが、.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) )
テキストの線を太めにするとよく目立つと思います。
