IOS學習05|從 playground 調色去背圖片

~在playground中調整圖片~

1.將圖片去背並建立

這邊就是這次要用的圖片～

a.建立背景View

將圖片放入playground中後，即可利用建立程式顯示圖片

let usaImage = UIImage(named: "usamaru.png")
let usaImageView = UIImageView(image: usaImage)

b.調整View

再來就是圖片的大小與背景顏色設定

usaImageView.backgroundColor = UIColor(red: 0.9, green: 0.7, blue: 0.7, alpha: 1)
usaImageView.frame = CGRect(x: 0, y: 0, width: 250, height: 250)

執行後就能看到圖片囉～可以特過調整背景顏色改變圖片的顏色～

2. 加入特殊背景

結合兩個View使去背圖片呈現特殊花紋

a.建立背景View

那麼一樣建立背景圖的View，並調整和去背圖片相同的大小

let starImageView = UIImageView(image: UIImage(named: "starbk"))
starImageView.frame = CGRect(x: 0, y: 0, width: 250, height: 250)

b.View疊加

那麼將兩個View重疊在一起吧！背景會在最下層，所以是在背景圖中加入去背圖片～

starImageView.addSubview(usaImageView)

這樣就能看到擁有特殊花紋的圖片了！

💡去背圖片的背景顏色記得要弄掉or將透明度(alpha)調為0

3.加點花樣 — 背景調色＆邊框(border)

a.背景顏色遮罩

透過改變去背圖案的背景顏色為背景圖片加入顏色遮罩來改變背景色調

💡0 < 透明度(alpha) < 1 才能看到效果

usaImageView.backgroundColor = UIColor(red: 0.1, green: 0.7, blue: 0.7, alpha: 0.4)

這樣能看到不同色調的圖了～

左：調色前 右：調色後

b.設定邊框(border)

在想加入邊框的view設定其border寬度與顏色即可完成

starImageView.layer.borderWidth = 5
starImageView.layer.borderColor = CGColor(red: 0.8, green: 0.3, blue: 0.3, alpha: 1)