Swift — 文字轉圖片(Text to Image)
讓我們看看如何把文字轉換成一張圖片吧!
❖ 前言:
這也算是我誤打誤撞學到的技巧吧,前陣子碰到了一個要在 iOS 上實作小遊戲的需求,而其中有某個遊戲的 UI 是以格狀呈現的,並且格子大小會隨著遊戲進行越來越小,因此就方格內的文字會出現 “…” 這種無法完整顯示的狀況。
原本是想請設計師幫忙處理這個顯示上的問題,想說不要使用文字來呈現,而是使用圖片來取代。而這時與我共同開發的工程師說:
🤔 不然我們看看能不能把文字轉成圖片試試看?
因此這篇文章就誕生了! 🎉
❖ 實作方式:
我在 Stack Overflow 上找到蠻多類似的技巧的,尤其是下面這個連結中,裡面提供了 6 種不同的方式,教你從 String
轉換成 UIImage
的方式。
而我是採取以下連結的方式,他與上面那篇 Stack Overflow 的連結中使用 CALayer
的方式相同。個人覺得比較直覺,因為感覺上就是由 UILabel
轉換成 UIImage
。
❖ 實作:
為了方便展示,我們先創建一個無法正常顯示內容的 UILabel
在畫面中:
那麼接下來,我們來編寫我們 String
轉 UIImage?
的函數:
首先我們透過 UIGraphicsBeginImageContent
方法來創建圖像的上下文,接著透過 UIGraphicsGetCurrentContext
來獲取目前圖像的上下文,並且將函數體中 label.layer
渲染到此上下文中。最後透過 UIGraphicsGetImageFromCurrentImageContext
來從此圖像上下文中獲取 UIImage
。
接著就讓我們試試看這個方法吧!我們創建一個 UIImageView
並且其 image
內容為 textToImage(文字內容)
,然後使用與上面 UILabel
相同的 size
執行看看結果:
如此一來我們已經能夠將 String
轉換成 UIImage?
了,但轉換出來的圖像似乎有點模糊。這邊我們可以改用 UIGraphicsBeginImageContextWithOptions
方式來創建圖像上下文,其中參數除了 size
以外還多了 opaque
以及 scale
(scale
使用 0 來表示不縮放)。
讓我們來看一下差別吧!
左邊使用 UIGraphicsBeginImageContent
右邊使用 UIGraphicsBeginImageContextWithOptions
❖ 後記
誤打誤撞學到了一個技巧,但是感覺上也算是一個挺實用的技能,畢竟前端就是常常在處理這種顯示相關內容,未來也可以考慮部分內容使用這種方式來取代文字縮放的功能,而實現方式也不太困難。