不用花錢也不用出門!用 Playground 幫恐龍做三頂新帽子
◆課堂練習兼作業5–1:從 Playground 調色去背圖片◆
剛好前幾天宣布了辣妹與恐龍的重新播放日期決定的消息(原本因為疫情導致製作延期,第八集開始就停播了 (´;ω;`))就用程式來幫恐龍變化一下造型吧!
【放入想變化的圖片】
把圖片拖曳進 Playground 的 Resource 資料夾,然後寫程式讓他可以跑結果出來
let aImage = UIImage(named: “放進resource的圖檔的名字”)
let aImageView = UIImageView(image: aImage)斜體=自己命名或是跟檔名有關部分
粗體=重點部分
。雖然在程式中只打 UIImage 就會出現圖片預覽,但是 App 顯示圖片是用UIImageView,因此沒有寫 UIImageView就不會顯示在 App 畫面上
。named 部分的圖檔名字:.png 以外的檔案格式要加上副檔名(如:.jpg、.gif)
【換顏色】
aImageView.backgroundColor = UIColor(red: 150/255, green: 0, blue: 1/255, alpha: 1)
。red/green/blue 寫 1 = 100% = 255/255;0 = 0%=0/255。如果 RGB 看到數值是寫 R:1 / G:255 / B:0,程式中分別要寫成:1/255、1、0
【加花紋】
let patternImageView = UIImageView(image: UIImage(named: “lepord.jpg”))patternImageView.frame = aImageView.frame
patternImageView.addSubview(aImageView)
。放入花紋的圖片,此處把兩行寫成一行
。「patternImageView.frame = aImageView.frame」是為了讓花紋圖片跟原圖(要變化的圖)大小變一樣,這樣才不會因為花紋圖尺寸太大而超出原本的圖片框(下面有失敗的案例圖)
。用 .addSubview 讓圖片覆蓋至原本的圖上,.addSubview 前面是在上層的圖案(花紋圖)後面括弧是在下層的圖(原圖)
。完成後預覽要用「放花紋的那個 UIImageView」
【加邊框】
patternImageView.layer.borderWidth = 10
patternImageView.layer.borderColor = CGColor(red: 246/255, green: 146/255, blue: 193/255, alpha: 1)
繼續用剛才加花紋的圖片做延伸
。borderWidth=邊框寬度/borderColor=邊框顏色,記得前面是 .layer
。顏色部分也可以寫成:
UIColor(red: 246/255, green: 146/255, blue: 193/255, alpha: 1).cgColor
等於把原本輸入的 UIColor 轉為 CGColor(如果直接用 UIColor 會出現錯誤,因為 borderColor 中就是要用 CGColor 才能呈現,塞 UIColor 他呈現不了)
【顏色+花紋重疊】
let bImage = UIImage(named: “dino”)
let bImageView = UIImageView(image: bImage)// 顏色
bImageView.backgroundColor = UIColor(red: 20/255, green: 130/255, blue: 150/255, alpha: 0.7)// 花紋
let bPatternImageView = UIImageView(image: UIImage(named: “giraffe.jpg”))
bPatternImageView.frame = colorStyleImageView.frame
bPatternImageView.addSubview(bImageView)
其實程式碼就是結合前面顏色跟花紋寫在一起而已,但注意:
顏色部分透明度(alpha)不能是 1,不然花紋會被不透明的顏色遮住
程式碼兼上課筆記(?)
因為想一次顯示三種(只換顏色、只加花紋、花紋+顏色)不同的變化,所以貼了三次圖片
讓程式碼像上面一樣漂漂出現,不用從 Xcode 裡面 Commit,複製貼上到 GitHubGist 就好(一開始傻傻用 Commit 的我,結果實際方法更簡單 (╥﹏╥))
詳細可以參考彼得潘的文章: