[iPhone] 画像とテキストの合成 UIGraphicsBeginImageContext

画像の上に別の画像を重ねたり説明文をいれたりしたい場合には、UIGraphicsBeginImageContextを使うと画像とテキストを合成できます。画像などを重ねるには他にも方法はありますが選択肢の一つです。
 
この例のように1枚の画像にテキストとアイコン画像を重ねて合成してみます。
 

Swift 4.0
Xcode 9.2

 

UIGraphicsBeginImageContext

 
これを実行するために、UIGraphicsBeginImageContextを呼び出し、
終了したらUIGraphicsEndImageContext()で終わります。

その2つの間で作業します。Graphics context 上に UIImageの draw(in:) メソッドを使って画像、テキストなど一つづつ順番にレンダリングしていき、最終的に出来上がったGraphics contextには合成されたImageができているという仕組みです。
 
例として以下の画像とテキストを合成して見ます。
 
emmy
 
handbag
 
これらとテキスト

Emmy’s shopping in London.

画像は、Retina対応としてAssets.xcassets に入れます。
 
Retina 画像でない場合は
UIGraphicsBeginImageContextWithOptions
を使わないと画像が粗くなる場合があります。
 

サンプルコード

 
iPhone X で横長で表示させるケースです。Portraitは設定が異なりますが、ここではそれが主目的ではないので割愛します。
 
ViewController.swift

 
新しくできた UIImage を UIImageView でスケールしてスクリーンに描画しています。
 
そのため、Emmy画像が大きい分、余計にメモリを食っている可能性があり、UIGraphicsBeginImageContext(CGSize: size)
のsizeを最終画像サイズにすればいいのかもしれません。あるいは別の方法もあるようですが
 
iPhone X なので上下(ここでは左右)のマージン、safeAreaInsetsを考慮してエリア内に収まるようにしてみたのですが。
 

 
ただ、この場合ボタンや他のUIが被らないのであればむしろ画面を大きく使う事が望ましいと思われますので
 

 
こっちの方がいいでしょうね
 
 
関連ページ

References:
UIGraphicsBeginImageContext – UIKit | Apple Developer Documentation
UIGraphicsEndImageContext() – UIKit | Apple Developer Documentation
draw(in:) – UIImage | Apple Developer Documentation

誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:




ページのトップへ戻る

シェアする

  • このエントリーをはてなブックマークに追加

フォローする