#31 彼得潘的影子 — 調色大師
Published in
9 min readAug 27, 2021
作業目的: 熟練 outlet,action,UISlider, UIColor。
將圖片想換色的區塊去背
利用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.boundsgradientLayer.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 = truegradientView.clipsToBounds = trueImageView.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.cgColorImageView.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 = 255greenSlider.value = 255blueSlider.value = 255alphaSlider.value = 0ImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value / 255), green: CGFloat(greenSlider.value / 255), blue: CGFloat(blueSlider.value / 255), alpha: CGFloat(alphaSlider.value))redSlider.isEnabled = falsegreenSlider.isEnabled = falseblueSlider.isEnabled = falsealphaSlider.isEnabled = falsecornerRadiusSlider.isEnabled = falseborderWidthSlider.isEnabled = falsegradientSlider.isEnabled = trueshowSliderText()} else {modeLabel.text = "Change what you like!"redSlider.isEnabled = truegreenSlider.isEnabled = trueblueSlider.isEnabled = truealphaSlider.isEnabled = truecornerRadiusSlider.isEnabled = trueborderWidthSlider.isEnabled = truegradientSlider.isEnabled = falsegradientSlider.value = 0}}
Reset
@IBAction func resetAllSlider(_ sender: Any) {if gradientSwitch.isOn {gradientSlider.value = 0drawGradientView()showSliderText()} else {redSlider.value = 0greenSlider.value = 0blueSlider.value = 0alphaSlider.value = 0.0cornerRadiusSlider.value = 0borderWidthSlider.value = 0ImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value / 255), green: CGFloat(greenSlider.value / 255), blue: CGFloat(blueSlider.value / 255), alpha: CGFloat(alphaSlider.value))ImageView.clipsToBounds = truegradientView.clipsToBounds = trueImageView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)gradientView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)ImageView.layer.borderColor = UIColor.systemOrange.cgColorImageView.layer.borderWidth = CGFloat(borderWidthSlider.value)showSliderText()}}
・程式碼
・完整檔案
・參考資料