圖檔合併 | 練習實作 #4

先來一張原始圖，你覺得照片中的女生在看什麼？！姑且不論窗外景色如何，假如能夠擁有這麼大片窗景，每天留點時間靜靜地看著天空、喝杯熱咖啡、思考著未來一定很不錯。言歸正傳，我覺得這個女生只能看著枯樹跟紅瓦房有點太單調了，所以我要把照片中紅色框區域換成其它的內容 ⋯⋯

方法一，先將窗景移除，因範圍較複雜所以利用 Photoshop 來去背，完成後存為 window_girl.png 格式檔。

在 playground 中宣告 windowGirlImageView 產生 window_girl.png 圖片

let windowGirlImage = UIImage(named: "window_girl.png")
let windowGirlImageView = UIImageView(image: windowGirlImage)

接下來找一張外太空圖片作為窗景，一樣在 playground 中宣告 galaxyImageView 產生 galaxy.jpg 圖片（下面的寫法又比上面更為精簡）

let galaxyImageView = UIImageView(image: UIImage(named:"galaxy.jpg"))

最後，再利用 addSubview 把 windowGirlImageView 加到 galaxyImageView 上層，完成。

galaxyImageView.addSubview(windowGirlImageView)

另外一種方式則是利用 Mask 遮罩來實現相同的效果，原本照片只留下紅框範圍，其餘人像跟窗戶框全部移除（為了辨識度我把窗景全部塗黑），完成後存成 window_mask.png 格式檔

let galaxyImage2View = UIImageView(image: UIImage(named: "galaxy.jpg"))
let windowMaskImageView = UIImageView(image: UIImage(named: "window_mask.png"))
galaxyImage2View.mask = windowMaskImageView

先各別宣告 galaxyImage2View 產生 galaxy.jpg 圖片、windowMaskImageView 產生 window_mask.png 圖片，接著利用 mask 遮罩設定 galaxy.jpg 的內容會顯示在 windowMaskImageView。另外，我想要讓風景顏色再變化一下 ⋯⋯

let colorChangeView = UIView(frame: galaxyImage2View.frame)
colorChangeView.backgroundColor = UIColor(red: 1, green: 1, blue: 0, alpha: 0.2)

最後，把 colorChangeView 加到 galaxyImage2View，再把合成後的 mask 內容利用 addSubview 堆疊在原始圖片 backgroundImageView 上，完成。

let backgroundImageView = UIImageView(image: UIImage(named: "window_girl.jpg"))
galaxyImage2View.addSubview(colorChangeView)
backgroundImageView.addSubview(galaxyImage2View)

Source:
www.pixabay.com