#13 在 Xcode 使用圖片、文字、邊框、圓角、平移、縮放、旋轉製作漂亮卡片

Add custom font / UIView / UIImageView / UILabel / UIColor / UIFont / CGPoint / CGRect / CGAffineTransform / CALayer

卡片成品（in iPad Pro 12.9-inch / iOS 14.5）

文字來自歌曲：

Sunset Rollercoaster — 我是一隻魚 I’m a fish (Cover), 2019

・來自 Canva 網站的原始卡片：

來自 Canva 網站的原始卡片

・模仿製作（左）與再創作（右）：

仿作（左）與再創作（右）

準備動作（抓圖片和去背）：

鯛魚燒（黃＆棕）圖

星星圖

標題圖

以下介紹再創作（上右圖）之程式碼

・繪製 Canvas、邊框、標題：注意 borderColor 的類別是 CGColor。

繪製 Canvas、邊框、標題

・繪製黃色鯛魚燒：判斷哪些位置不要有黃色鯛魚燒。注意第二、第三列的 y 座標有微調過。

繪製黃色鯛魚燒

・繪製棕色鯛魚燒：原理同上。

繪製棕色鯛魚燒

・繪製白色星星：寫成函式方便重用，須注意參數型別為 CGFloat。transform 的順序須為平移 −> 縮放 −> 旋轉。

繪製白色星星

・繪製文字：

文字不要被星星擋到，所以寫在畫星星 code 的後面。

用迴圈跟陣列依序讀取歌詞，注意兩層迴圈擺放順序，使歌詞是一列一列而非一行一行顯示。

中文字型為思源黑體（Bold）( NotoSansCJKtc-Bold），參考資料有 Xcode 如何加入中文字型的教學。（注意：教學提到的粉筆字體（Nagurigaki-Crayon）可能會讓部分中文字無法顯示。）

思源黑體（Bold）

・Canvas 置中與放大，最後加進 view：

完整程式碼：

參考資料

作業來源

# 142 使用圖片，文字，emoji，邊框 & 圓角製作漂亮卡片

利用 CGAffineTransform 縮放，位移，旋轉和鏡像翻轉

字型加入教學

查看目前擁有的字型的 Postscript name 方式

加入新字型方式

Info.plist 中輸入如下內容，再 build，就會多出加入字型的 Postscript name

利用 extension 擴充 UIFont 類別

可搭配 Nil coalescing 技巧，萬一引號內的字串 Postscript name 打錯，或是該字型不支援，就會回傳 ?? 後的預設字型及其大小，不會回傳 nil。

（回傳值若是 nil ，系統會隨便設個預設值，倒也不會 crash。）

其他參考

為 iOS App 加入客製字型 (custom font)

如何利用 Font Book 知道字型的名字