羽人非獍之調色大師

使用UISlider、UISwitch、UIButton搭配亂數

最近事務繁忙，作業都荒廢了一陣子。好不容易可以完成調色大師的app

搭配自己的大頭貼照片「羽人非獍」這個曾經在霹靂布袋戲很紅的一位角色。先使用Photoshop將角色的翅膀去背使用。

可以參考Peter 的網站教學一步一步去背。

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

也可以使用線上網站去背：

LunaPic.com Photo Editor Transparent Background tool

消除图片中的背景 - remove.bg

講一下基本的架構：

先放上一個空白的view 及 羽人的imageView 我在這邊設定相同的大小及位置。

接下來利用Peter上課練習過的UISlider 、UILabel存放數值。

@IBAction func changeColorSlider(_ sender: UISlider) {
eeeImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green:CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
// 顯示顏色的數值
redLabel.text = String(format: "%.2f", redSlider.value)
greenLabel.text = String(format: "%.2f", greenSlider.value)
blueLabel.text = String(format: "%.2f", blueSlider.value)
alphaLabel.text = String(format: "%1f", alphaSlider.valu
}

在隨機的按鈕上，設定：

@IBAction func random(_ sender: UISlider) {
redSlider.value = Float.random(in: 0...1)
greenSlider.value = Float.random(in: 0...1)
blueSlider.value = Float.random(in: 0...1)
alphaSlider.value = Float.random(in: 0...1)
eeeImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
redLabel.text = String(format: "%.2f", redSlider.value)
greenLabel.text = String(format: "%.2f", greenSlider.value)
blueLabel.text = String(format: "%.2f", blueSlider.value)
alphaLabel.text = String(format: "%.1f", alphaSlider.value)
}

在初始化的按鈕上，設定：

@IBAction func resetBtn(_ sender: Any) {
// 設定還原的預設值
redSlider.value = 0.5
greenSlider.value = 0.5
blueSlider.value = 0.5
alphaSlider.value = 0.5
// 圖片背景顏色
eeeImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value / 255), green: CGFloat(greenSlider.value / 255), blue: CGFloat(blueSlider.value / 255), alpha: CGFloat(alphaSlider.value / 255))
// Label數值
redLabel.text = String(format: "%.2f", redSlider.value)
greenLabel.text = String(format: "%.2f", greenSlider.value)
blueLabel.text = String(format: "%.2f", blueSlider.value)
alphaLabel.text = String(format: "%.1f", alphaSlider.value)

之後再加入一些圓角、邊框、漸層等功能。

在設定圓角的slider時，記得也要去調整Attributes inspector的數值，圓角的數值可以設定大一點，才會比較明顯。

完整程式碼：

參考資訊：

讓圖片同時有圓角和陰影

要調幾次、隨機、重來都可以！恐龍的帽子調色進階版─調色大師 APP

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