Swift — 文字轉圖片(Text to Image)

讓我們看看如何把文字轉換成一張圖片吧!

Jeremy Xue
Jeremy Xue ‘s Blog
Nov 8, 2020

--

❖ 前言:

這也算是我誤打誤撞學到的技巧吧,前陣子碰到了一個要在 iOS 上實作小遊戲的需求,而其中有某個遊戲的 UI 是以格狀呈現的,並且格子大小會隨著遊戲進行越來越小,因此就方格內的文字會出現 “…” 這種無法完整顯示的狀況。

原本是想請設計師幫忙處理這個顯示上的問題,想說不要使用文字來呈現,而是使用圖片來取代。而這時與我共同開發的工程師說:

🤔 不然我們看看能不能把文字轉成圖片試試看?

因此這篇文章就誕生了! 🎉

❖ 實作方式:

我在 Stack Overflow 上找到蠻多類似的技巧的,尤其是下面這個連結中,裡面提供了 6 種不同的方式,教你從 String 轉換成 UIImage 的方式。

而我是採取以下連結的方式,他與上面那篇 Stack Overflow 的連結中使用 CALayer 的方式相同。個人覺得比較直覺,因為感覺上就是由 UILabel 轉換成 UIImage

❖ 實作:

為了方便展示,我們先創建一個無法正常顯示內容的 UILabel 在畫面中:

那麼接下來,我們來編寫我們 StringUIImage? 的函數:

首先我們透過 UIGraphicsBeginImageContent 方法來創建圖像的上下文,接著透過 UIGraphicsGetCurrentContext 來獲取目前圖像的上下文,並且將函數體中 label.layer 渲染到此上下文中。最後透過 UIGraphicsGetImageFromCurrentImageContext 來從此圖像上下文中獲取 UIImage

接著就讓我們試試看這個方法吧!我們創建一個 UIImageView 並且其 image 內容為 textToImage(文字內容) ,然後使用與上面 UILabel 相同的 size 執行看看結果:

如此一來我們已經能夠將 String 轉換成 UIImage? 了,但轉換出來的圖像似乎有點模糊。這邊我們可以改用 UIGraphicsBeginImageContextWithOptions 方式來創建圖像上下文,其中參數除了 size 以外還多了 opaque 以及 scalescale 使用 0 來表示不縮放)。

讓我們來看一下差別吧!
左邊使用 UIGraphicsBeginImageContent
右邊使用 UIGraphicsBeginImageContextWithOptions

❖ 後記

誤打誤撞學到了一個技巧,但是感覺上也算是一個挺實用的技能,畢竟前端就是常常在處理這種顯示相關內容,未來也可以考慮部分內容使用這種方式來取代文字縮放的功能,而實現方式也不太困難。

--

--

Jeremy Xue
Jeremy Xue ‘s Blog

Hi, I’m Jeremy. [好想工作室 — iOS Developer]