課堂筆記-Swift玩圖片

//筆記主旨：用Swift加入並控制圖片

//筆記大綱：
1.將圖片先在Preview上去背
2.打開Xcode的MyPlayground加入圖片
3.任意變色、變形、調整邊框

//前置作業：上網下載一張紅色G car的照片，將車身烤漆部分去背

step 1.
讓去背區域顯示畫布顏色

//導入UI模組
import UIKit
//加入圖片“gClass.png” 並命名
//常常會忘記，加入照片名稱要“”
let gcarImage = UIImage(named: "gClass.png")
//概念：將存入xcode的圖片叫出來->再將叫出來但懸空在nowhere的圖片放到畫紙上
//畫紙，which is ImageView
let gcarImageView = UIImageView(image: gcarImage)
//設定底色：誰.底色=用UIcolor來定義底色
//UIColor 的RGB數值範圍為0~1, 故輸入數字可以"x/255"方式key in
gcarImageView.backgroundColor = UIColor(displayP3Red: 1, green: 0, blue: 0, alpha: 1)

完成第一步驟，我們可以由去背的紅色G car在中得到另一台紅色G car
咦？

step 2.
調整大小

//規範框架=Core Graphics rectangle
let frame = CGRect(x: 0, y: 0, width: 300, height: 100)
gcarImageView.frame = frame

完成第二步驟，你可以得到一台Jimny
咦？

step 3.
加入底圖，以圖案方式呈現底色

在步驟三，會加入一個小小的簡化技巧

let carbonImage = UIImage(named: "carbon.jpg")
let carbonImageView = UIImageView(image: carbonImage)
//上方2段把空氣中的圖放到畫布上的動作，可直接簡化成以下：
let carbonImageView = UIImageView(image:UIImage(named: "carbon.jpg"))
//一樣大，才好擺
carbonImageView.frame = gcarImageView.frame
//在底圖上.加入附屬圖層（名稱）
carbonImageView.addSubview(gcarImageView)

終於，完成第三步驟，可以得到一台 貴鬆鬆的 碳纖維的 紅色G car
可喜可賀
＊如果看不到碳纖維，記得回去調底色的Alpha值～

step 4.
加入不必要的邊框

var layer = carbonImageView.layer
layer.borderWidth = 40
//上方2個步驟可直接簡化為：
carbonImageView.layer.borderWidth = 40
//設定好邊框寬度，別忘了叫出來看看
carbonImageView
//定義顏色
carbonImageView.layer.borderColor = UIColor(red: 79/255, green: 79/255, blue: 79/255, alpha: 1)
//bordercolor的型別是CGColor，只吃CGColor
//所以會出現 ***Cannot assign value of type ‘UIColor’ to type ‘CGColor’
//這時候，我們就直接暴力把它變成CGColor by直接加一個.cgColor在尾巴～
carbonImageView.layer.borderColor = UIColor(red: 79/255, green: 79/255, blue: 79/255, alpha: 1).cgColor
//show
carbonImageView

最後附上其實只有一點點的程式碼