#31 彼得潘的影子 — 調色大師

作業目的: 熟練 outlet，action，UISlider, UIColor。

圖片來源：https://www.hk01.com/%E6%95%B8%E7%A2%BC%E7%94%9F%E6%B4%BB/526261/%E5%9C%B0%E6%B5%B7%E6%88%B0%E8%A8%98-50%E5%B9%85%E5%90%8D%E5%A0%B4%E9%9D%A2%E9%AB%98%E6%B8%85%E5%9C%96-%E5%90%89%E5%8D%9C%E5%8A%9B%E9%96%8B%E6%94%BE%E4%B8%8B%E8%BC%89%E5%8F%AF%E4%BD%9Cwallpaper#media_id=5314079

將圖片想換色的區塊去背

如何用 Preview App (預覽程式)去背圖片

利用slider控制RGB

@IBAction func changeColor(_ sender: Any) {
ImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value / 255), green: CGFloat(greenSlider.value / 255), blue: CGFloat(blueSlider.value / 255), alpha: CGFloat(alphaSlider.value))
showSliderText()
}

控制漸層變化、建立漸層

@IBAction func changeGradient(_ sender: Any) {
drawGradientView()
showSliderText()
}
private func drawGradientView() {
gradientLayer.frame = gradientView.bounds
gradientLayer.locations = [
0,
NSNumber(value: gradientSlider.value),
NSNumber(value: gradientSlider.value * 2),
NSNumber(value: gradientSlider.value * 3)
]
gradientLayer.colors = [
UIColor.red.cgColor,
UIColor.orange.cgColor,
UIColor.yellow.cgColor,
UIColor.green.cgColor,
UIColor.blue.cgColor
]
gradientView.layer.addSublayer(gradientLayer)
}

利用slider控制圓角

除了調整圖片imageView的圓角，漸層的View也要一起調整，不然會白一塊

@IBAction func changeCornerRadius(_ sender: Any) {
ImageView.clipsToBounds = true
gradientView.clipsToBounds = true
ImageView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)
gradientView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)
showSliderText()
}

利用slider控制框線

這邊要記得layer.borderColor是CGColor

@IBAction func changeBorderWidth(_ sender: Any) {
ImageView.layer.borderColor = UIColor.systemOrange.cgColor
ImageView.layer.borderWidth = CGFloat(borderWidthSlider.value)
showSliderText()
}

隨機調整

因為有加入Switch，判斷是不是在漸層模式下調整，預設是在一般模式，隨機調整不會調到漸層的變化，漸層模式下只會調整漸層

@IBAction func randomColor(_ sender: Any) {
if gradientSwitch.isOn {
gradientSlider.value = Float.random(in: 0...1)
drawGradientView()
showSliderText()
} else {
redSlider.value = Float.random(in: 0...255)
greenSlider.value = Float.random(in: 0...255)
blueSlider.value = Float.random(in: 0...255)
alphaSlider.value = Float.random(in: 0...1)
ImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value / 255), green: CGFloat(greenSlider.value / 255), blue: CGFloat(blueSlider.value / 255), alpha: CGFloat(alphaSlider.value))
gradientLayer.removeFromSuperlayer()
showSliderText()
}
}

開關控制

@IBAction func switchMode(_ sender: Any) {
if gradientSwitch.isOn {
modeLabel.text = "Gradient Mask"
redSlider.value = 255
greenSlider.value = 255
blueSlider.value = 255
alphaSlider.value = 0
ImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value / 255), green: CGFloat(greenSlider.value / 255), blue: CGFloat(blueSlider.value / 255), alpha: CGFloat(alphaSlider.value))
redSlider.isEnabled = false
greenSlider.isEnabled = false
blueSlider.isEnabled = false
alphaSlider.isEnabled = false
cornerRadiusSlider.isEnabled = false
borderWidthSlider.isEnabled = false
gradientSlider.isEnabled = true
showSliderText()
} else {
modeLabel.text = "Change what you like!"
redSlider.isEnabled = true
greenSlider.isEnabled = true
blueSlider.isEnabled = true
alphaSlider.isEnabled = true
cornerRadiusSlider.isEnabled = true
borderWidthSlider.isEnabled = true
gradientSlider.isEnabled = false
gradientSlider.value = 0
}
}

Reset

@IBAction func resetAllSlider(_ sender: Any) {
if gradientSwitch.isOn {
gradientSlider.value = 0
drawGradientView()
showSliderText()
} else {
redSlider.value = 0
greenSlider.value = 0
blueSlider.value = 0
alphaSlider.value = 0.0
cornerRadiusSlider.value = 0
borderWidthSlider.value = 0
ImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value / 255), green: CGFloat(greenSlider.value / 255), blue: CGFloat(blueSlider.value / 255), alpha: CGFloat(alphaSlider.value))
ImageView.clipsToBounds = true
gradientView.clipsToBounds = true
ImageView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)
gradientView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)
ImageView.layer.borderColor = UIColor.systemOrange.cgColor
ImageView.layer.borderWidth = CGFloat(borderWidthSlider.value)
showSliderText()
}
}

・程式碼

・完整檔案

GitHub - CheChenLiu/changeColorApp

・參考資料

#13 彼得潘的影子 — 調色大師

利用 CAGradientLayer 製作漸層

#13 調色大師 － 辛普森家庭

#8 ㄇㄚˊ幾兔 調色盤＆漸層調色