質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

1回答

3276閲覧

UILabelとUIImageViewを合成?して、1つの画像として書き出したい。

rea_sna

総合スコア32

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2020/05/07 10:11

編集2022/01/12 10:55

したいこと

UIImageViewで読み込んでいる画像と、その上にあるUILabelを一つの画像として書き出したいです。
イメージ説明

試したこと

さまざまな記事など読み、試しましたがあまり良くわからず、結果的に実装できていません。

コード

Swift

1import UIKit 2 3class EditViewController: UIViewController, UIImagePickerControllerDelegate & UINavigationControllerDelegate { 4 5 @IBOutlet weak var imageLabel: UILabel! 6 @IBOutlet weak var fontSlider: UISlider! 7 @IBOutlet weak var pictureView: UIImageView! 8 // @IBOutlet weak var OpacitySlider: UISlider! // 不透明度のSlider 今後のUPD対象 9 10 11 override func viewDidLoad() { 12 super.viewDidLoad() 13 14 // Screen Size の取得 15 let screenWidth:CGFloat = view.frame.size.width 16 let screenHeight:CGFloat = view.frame.size.height 17 18 // Labelのフレームを設定 19 imageLabel.frame = CGRect(x:0, y:0, width:343, height:110) 20 21 // Labelをスクリーン中央に設定 22 imageLabel.center = CGPoint(x:screenWidth/2, y:screenHeight/2) 23 24 // タッチ操作を enable 25 imageLabel.isUserInteractionEnabled = true 26 27 self.view.addSubview(imageLabel) 28 29 30 // Do any additional setup after loading the view. 31 } 32 33 34 35 // 画面にタッチで呼ばれる 36 override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { 37 print("touchesBegan") 38 39 } 40 41 // ドラッグ時に呼ばれる 42 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { 43 // タッチイベントを取得 44 let touchEvent = touches.first! 45 46 // ドラッグ前の座標, Swift 1.2 から 47 let preDx = touchEvent.previousLocation(in: self.view).x 48 let preDy = touchEvent.previousLocation(in: self.view).y 49 50 // ドラッグ後の座標 51 let newDx = touchEvent.location(in: self.view).x 52 let newDy = touchEvent.location(in: self.view).y 53 54 // ドラッグしたx座標の移動距離 55 let dx = newDx - preDx 56 print("x:(dx)") 57 58 // ドラッグしたy座標の移動距離 59 let dy = newDy - preDy 60 print("y:(dy)") 61 62 // 画像のフレーム 63 var viewFrame: CGRect = imageLabel.frame 64 65 // 移動分を反映させる 66 viewFrame.origin.x += dx 67 viewFrame.origin.y += dy 68 69 imageLabel.frame = viewFrame 70 71 self.view.addSubview(imageLabel) 72 } 73 74 override func didReceiveMemoryWarning() { 75 super.didReceiveMemoryWarning() 76 } 77 78 79 @IBAction func EditText(_ sender: Any) { 80 81    82  // < 省略 > 83 84 85 } 86 87 @IBAction func fontSliderAction(_ sender: UISlider) { 88 print(sender.value) 89 90 imageLabel.font = imageLabel.font.withSize(CGFloat(Int(sender.value))) 91 92 } 93 94 95 96 97 @IBAction func Save(_ sender: UIBarButtonItem) { 98 99 100 } 101 102 103 104 105 @IBAction func addButton(_ sender: Any) { 106 107 108 // < 省略 > 109 110  } 111 112 113}

ストーリーボードは以下のような感じです。
イメージ説明 

補足

Xcode 11.4.1
Development target iOS 12.0

些細なことやアドバイス、記事などでも構いませんので、ご教授よろしくお願いいたします...

[追記 2020/06/06]

コメント欄でご指摘いただいた、self.view.addSubview(imageLabel)imageView.addSubview(lblView)に修正することで、
文字と写真の合成をすることができました。

フォトライブラリ等から取得した画像を保存する際に、
現在はUIImageViewのいらない部分(わかりやすくするために青くしています)も一緒に保存されてしまうので、(以下1枚目の画像)
フォトライブラリ等から取得した段階で、取得した画像にUImageViewの縦横比を合わせるなどの処理をした上で保存したいと思っています。(イメージ画像、以下2枚目のもの)
ビフォー アフター

現在のUIImageViewのサイズ設定は以下の通りです。
今のところ、AutoLayoutはまだ設定していません。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

以下の参考サイトなどが役に立ちませんでしょうか。
※以下は"drawHierarchy"メソッドを利用するパターンとなりますので、ImageView上にLabelが乗っかっていないと上手く動作しないと思います。
("drawHierarchy"以外の合成に関しては、"draw"や"render"メソッドなどで検索すると他の情報が出るかもしれません)

画面中央のスクリーンショットを撮りたい。
コピペでできるSwiftでスクリーンショットを撮る

・ViewController全体のサンプル

Swift

1import UIKit 2 3class ViewController: UIViewController { 4 5 @IBOutlet weak var imageView: UIImageView! // 合成用ImageView 6 @IBOutlet weak var lblView: UILabel! // 合成用Label 7 @IBOutlet weak var resultImageView: UIImageView! // 合成結果表示用ImageView 8 9 override func viewDidLoad() { 10 super.viewDidLoad() 11 12 // LabelをImageView上に追加する 13 imageView.addSubview(lblView) 14 lblView.frame = CGRect(x: 0, y: 0, width: lblView.bounds.size.width, height: lblView.bounds.size.height) 15 } 16 17 override func viewDidAppear(_ animated: Bool) { 18 super.viewDidAppear(animated) 19 20 // 画面表示時と同時にViewを合成 21 self.resultImageView.image = self.takeScreenShot() 22 } 23 24 // Viewの合成処理(キャプチャ取得処理) 25 private func takeScreenShot() -> UIImage { 26 // コンテキスト開始 27 UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, false, 0.0) 28 29 // ImageView(ImageView上のView含む)を書き出す 30 self.imageView.drawHierarchy(in: self.imageView.bounds, afterScreenUpdates: true) 31 32 // newImageに、コンテキストの内容を書き出す 33 let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()! 34 35 // コンテキストを閉じる 36 UIGraphicsEndImageContext() 37 38 // Imageを返却 39 return newImage 40 } 41}

2020.06.07追記

保存時のサイズ変更(ImageViewの余白部分削除)に関して追記いたします。

以下の参考サイトの方法は使えませんでしょうか。
※どちらも表示時から余白を削除するものなので”保存時”とは異なります。
また、トリミング時に多少の誤差(数px)が生じるかもしれません。
もし問題あれば、別質問とした方が良い回答が得られるかもしれません(お役に立てず申し訳ありませんが。。)

以下サンプルです(上記で1つめに挙げた参考サイトの方法を利用)
ポイントとしては、「extentionの追加」と「self.imageView.frame = self.imageView.contentClippingRect」の部分となります。

Swift

1import UIKit 2 3class ViewController: UIViewController { 4 5 @IBOutlet weak var imageView: UIImageView! // 合成対象のImageView 6 @IBOutlet weak var lbl: UILabel! // 合成対象のLabel 7 @IBOutlet weak var resultImageView: UIImageView!// 合成結果表示用のImageView 8 9 10 override func viewDidLoad() { 11 super.viewDidLoad() 12 13 // LabelをImageView上に追加する 14 imageView.addSubview(lbl) 15 16 // 結果表示用ImageViewの枠線設定 17 resultImageView.layer.borderWidth = 2 18 resultImageView.layer.borderColor = UIColor.red.cgColor 19 } 20 21 22 override func viewDidAppear(_ animated: Bool) { 23 super.viewDidAppear(animated) 24 25 // ImageViewから余白削除 26 self.imageView.frame = self.imageView.contentClippingRect 27 28 // ImageViewとLabelを合成し、結果表示用のImageViewにImage設定 29 self.resultImageView.image = self.takeScreenShot() 30 } 31 32 // Viewの合成処理(キャプチャ取得処理) 33 private func takeScreenShot() -> UIImage { 34 35 // コンテキスト開始 36 UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, false, 0.0) 37 38 // ImageView(ImageView上のView含む)を書き出す 39 self.imageView.drawHierarchy(in: self.imageView.bounds, afterScreenUpdates: true) 40 41 // newImageに、コンテキストの内容を書き出す 42 let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()! 43 44 // コンテキストを閉じる 45 UIGraphicsEndImageContext() 46 47 // Imageを返却 48 return newImage 49 } 50} 51 52// 参考サイトのextension定義 53extension UIImageView { 54 var contentClippingRect: CGRect { 55 guard let image = image else { return bounds } 56 guard contentMode == .scaleAspectFit else { return bounds } 57 guard image.size.width > 0 && image.size.height > 0 else { return bounds } 58 59 let scale: CGFloat 60 if image.size.width > image.size.height { 61 scale = bounds.width / image.size.width 62 } else { 63 scale = bounds.height / image.size.height 64 } 65 66 let size = CGSize(width: image.size.width * scale, height: image.size.height * scale) 67 let x = (bounds.width - size.width) / 2.0 68 let y = (bounds.height - size.height) / 2.0 69 70 return CGRect(x: x, y: y, width: size.width, height: size.height) 71 } 72} 73

余白削除前(分かりやすい様に、ImageViewの背景を青色に設定)
Before

余白削除後
After

投稿2020/05/07 13:44

編集2020/06/07 12:15
tsuki01

総合スコア1751

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rea_sna

2020/05/07 15:10

ご回答いただきありがとうございます。 スクリーンショットとして保存することはできましたが、 こちらで試してみたところ、ImageView上にLabelは乗っていますが、保存したものには、表示されていません... 可能であればこちらもアドバイス等いただければと思っているのが、 元画像と同じサイズ(寸法)で保存したいと思っています。 どうかよろしくお願いいたします。
tsuki01

2020/05/07 15:27

ラベルが合成されない件は、"self.view.addSubview(imageLabel)"ではなく、 "pictureView.addSubview(imageLabel)"という風になっていますでしょうか。 "drawHierarchy"を利用する場合、imageView上にきちんとaddSubviewされている状態でないとラベルが合成されないかと思われます。 また「元画像と同じサイズ」の件は、imageViewで表示しているサイズと同じってことでしょうか? 現状のサイズ指定箇所がどうなっているか知りたいので、質問に追記頂くことは可能でしょうか。
rea_sna

2020/06/06 13:27

お返事いただいたにもかかわらず、返信できておらず申し訳ないです。 「pictureView.addSubview(imageLabel)」に1箇所修正されていない箇所がありました。 修正したところ、無事に合成することができました。 また「元画像と同じサイズ」の件は、imageViewで表示しているサイズと同じってことでしょうか? >>このことですが、PickedImageの縦横比に合わせて、UIImageViewの縦横比を変え、保存したい、ということです... 念のため追記しますね。
tsuki01

2020/06/07 12:19

回答追記いたしました。 追記部分でも書きましたが、求めている回答とずれている場合は別質問の方が良い回答が得られるかもしれません。お役に立てず申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問