#13 彼得潘的影子 — 調色大師
Published in
14 min readAug 3, 2017
作業目的: 熟練 outlet,action,UISlider, UIColor。
參考圖片
題目靈感來源:
Develop in Swift Explorations 裡 4.2 的 Color Picker。
基本題:
1 找一張部分去背的圖片,利用 RGB 三個顏色的 slider 和透明度 alpha 的 slider 配色。可在去背圖片後再放一張背景圖,如此當 alpha < 1 時,即可露出背後的背景圖。
2 漸層顏色。比方利用 slider 調整橘色到藍色的漸層比例。
3 搭配亂數,由亂數決定 RGB & alpha 的數字,然後改變圖片顏色和 slider。
圖片去背可參考以下方法
(1) 方法一: 從 Mac 的 Preview App 去背。
(2) 方法二: 從線上網站去背
如何找到一張容易去背的圖片,可參考以下連結。
其它圖片參考
樂高圖片
進階題:
- 調整顏色的 hue,saturation & brightness。
- 從 App 畫面設定 RGB,修改 CAShapeLayer 繪製圖案的顏色。
- 在 slider 旁用 label 顯示 slider 目前的數值。
- 調整圓角 ,邊框,陰影,透明度。
- 調整縮放,位移,旋轉。
- 加入 switch 開關,控制是否可以滑動 slider。 當 switch 關閉時,slider 不能滑動,而且顏色值為 0。比方紅色 switch 關閉時,red 的 value 為 0。
- 加入 reset button,點選 reset 將讓顏色回到初始狀態。
- 搭配 timer 不斷變色。
- 可調整多個區塊的顏色,比方彼得潘的帽子跟衣服。
Apple 官方範例
Develop in Swift Explorations 的 4.2 Color Picker