#14 從 playground 調色去背圖片

雖然上課已經有練習過利用playground來調整去背圖片的功能, 但這邊仍利用寫作業的機會把它做個紀錄.

今天的主角是蠟筆小新, 首先先從Google來尋找一張適合的照片(PS: 最好是顏色比較單純的, 這樣去背比較容易)

Step1: 首先, 可以透過MAC內建的程式來達成去背的效果. 利用左上角的選取範圍或是仙女棒來選擇要移除的部分, 選擇Cut或是鍵盤上的刪除鍵即可去除 (PS: 如果有殘留部分, 可以重複步驟多做幾次). 下圖是把小新的衣服去背, 雖然看起來變白色, 但其實是透明的.

Step2: 接下來打開playground, 先把圖片拖曳到左方的Resources裡面.

Step3: 接著是寫程式的部分:

• 透過UIImage讀取照片
• 在Storyboard上負責顯示畫面的是UIImageView, 所以要把UIImage轉換成UIImageView
• 設定UIImageView的背景顏色

import UIKit
let image = UIImage(named: "shin-chan_cut.png")
let imageView = UIImageView(image: image)
imageView.backgroundColor = UIColor(red: 204/255, green: 204/255, blue: 255/255, alpha: 1)
imageView

Step4: 按下playground右邊欄的Quick Look或是Show Result, 即可看到換衣服的小新圖片.

增加子畫面(addSubView)

小新未來的目標是當一名工程師, 身為工程師一定要有一件格子襯衫, 所以接著我們試著把衣服換成最時髦的法蘭絨格子襯衫.

Step1: Goggle找尋適當的格子素材圖片, 並拖曳到playground的Resources.

Step2: 寫程式來新增子畫面.

• 背景顏色先改成透明才不會影響結果 backgroundColor的alpha: 0
• 調整兩張圖片的大小相同
• 利用addSubview讓小新的圖片疊在格子圖片的上方(子畫面)

import UIKit
let image = UIImage(named: "shin-chan_cut.png")
let imageView = UIImageView(image: image)
imageView.backgroundColor = UIColor(red: 204/255, green: 204/255, blue: 255/255, alpha: 0)
let gridView = UIImageView(image: UIImage(named: "Flannel.jpg"))
gridView.frame = imageView.frame
gridView.addSubview(imageView)
gridView

格子襯衫小新完成!