1

Swiftで一枚の画像に対して指定した位置に文字を入力する方法が知りたいです。

作りたいもののイメージとしてはオシャレな履歴書(可愛い画像に自分の名前や年齢、画像などの情報を入れる)になります。

現在の状況として、そもそもこういった場合

●1枚の画像を用意してそこに上からZStackなどを使って文字を載せる
●背景色やサイズなどを指定して画像そのものをプログラミングするところから始める

のどちらが良いかわかっていない初心者です。

現状としては、1番目の『1枚の画像を用意してそこに上からZStackなどを使って文字を載せる』という方法で試行錯誤しています。

今書いているコードの肝は

Zstack{
    Image("画像ファイル")
        .resizable()
        .aspectRation(contentMode: .fit)

    Text("文字入力1")
        .offset(x: -160, y: -80)
    Text("文字入力2")
        .offset(x: -160, y: -35)
}

という感じなのですが、この場合、画面上では自分の記入したい位置に文字が入力で来ている状態ですが、画面を横向きにしたり、使うiPhoneのサイズを変えると、画面座標での指定のため位置がズレてしまいます。

なので、画像そのものの座標を指定する必要があるのかな、と思っているのですが検索しても上手く情報に辿り着けません。

また、取り込んでいる画像のサイズそのものは変更したくない(作り終わった後に元の画像のサイズを維持して保存したい)のですが、どういったフレームワークやコードを試す、あるいは検索すると良いでしょうか?

教えていただけると嬉しいです。

よろしくお願いします。

1 件の回答 1

1

座標指定は難しいのでDragGestureでTextの位置を変更できるようにしてView自体を画像にしてみました。

import SwiftUI

struct ContentView: View {
  @State var dragAmount: CGPoint?
  
  var editorImage: some View {
    Image(systemName: "heart")
      .resizable()
      .frame(width: 100, height: 100, alignment: .center)
      .overlay {
        Text("hello")
          .position(self.dragAmount ?? .zero)
          .gesture( DragGesture().onChanged { self.dragAmount = $0.location } )
      }
  }
  
  var saveImage: some View {
    VStack {
      editorImage
    }
    .frame(width: 300, height: 300)
  }
  
  var body: some View {
    VStack {
      editorImage
      
      Button("SAVE") {
        Task {
          let renderer = ImageRenderer(content: saveImage)
          
          if let image = renderer.cgImage {
            UIImageWriteToSavedPhotosAlbum(.init(cgImage: image), nil, nil, nil)
          }
        }
      }
    }
  }
}
3
  • ありがとうございます! 知らなかった関数(?)などが知れて大変勉強になります! まだまだわからないことだらけなので一つずつ検索して勉強して見ます! 質問なのですが、こちらの場合は、下に表示されている『image View』を長押しして保存などすれば元のサイズの画像が保存できるという認識で大丈夫でしたでしょうか?
    – りりか
    Commented 2022年9月17日 7:27
  • コードを大きく修正しました。 その認識で大丈夫だと思います。
    – zunda
    Commented 2022年10月7日 7:20
  • ありがとうございました!とても勉強になりました。また何かありましたらぜひともよろしくお願いできれば幸いです。
    – りりか
    Commented 2022年10月17日 7:43

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。