#8 使用mask/邊框 /圓角製作漂亮卡片

這份作業練習了

• CGAffineTransform的位移、旋轉、縮放
• 用mask做出特別形狀的圖片
• 圖片邊框/圓角設定

因為現在是秋天所以用楓葉當主題，主題為一張楓葉照片，並用楓葉輪廓做mask，再加上楓葉的邊框，以及最能代表秋天的松鼠。

完成的卡片

首先先將素材匯入Playground的Resources中，並建立兩個ImageView，分別是楓葉照片及要用來遮罩的楓葉輪廓圖片。

let momijiImageView = UIImageView(image: UIImage(named: "momiji"))
let maskImageView = UIImageView(image: UIImage(named: "leaf-mask"))

momijiImageView

maskImageView

將楓葉照片調整為跟遮罩輪廓圖片一樣的大小，再用.mask進行遮罩。

momijiImageView.frame = maskImageView.frame
momijiImageView.mask = maskImageView
momijiImageView

完成遮罩後的圖片

先讀取上圖的frame，建立一個比上圖寬高各大60的cardView，並把完成遮罩後的圖片用addSubview貼上去。

var frame =  momijiImageView.frame
frame = CGRect(x: 0, y: 0, width: frame.width + 60, height: frame.height + 60)
let cardView = UIView(frame: frame)
cardView.backgroundColor = UIColor(red: 0.97, green: 0.89, blue: 0.78, alpha: 1.00)
cardView.addSubview(momijiImageView)

將楓葉遮罩加入卡片

楓葉不在正中央，因此用transForm調整位置，將楓葉移至中央。

momijiImageView.transform = CGAffineTransform.identity.translatedBy(x: 30, y: 30)

將楓葉移至中央後的卡片

用迴圈製作楓葉邊框，這邊有用到random讓每片楓葉的角度隨機產生。

let iconSize = 30
for i in 0...10 {
    let mapleLeafImageView = UIImageView(image: UIImage(named: "maple-leaf"))
    mapleLeafImageView.frame = CGRect(x: iconSize*i, y: 0, width: iconSize, height: iconSize)
    mapleLeafImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
    cardView.addSubview(mapleLeafImageView)
}
for i in 1..<10 {
    let mapleLeafImageView = UIImageView(image: UIImage(named: "maple-leaf"))
    mapleLeafImageView.frame = CGRect(x: 0, y: i*iconSize, width: iconSize, height: iconSize)
    mapleLeafImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
    cardView.addSubview(mapleLeafImageView)
}
for i in 1..<10 {
    let mapleLeafImageView = UIImageView(image: UIImage(named: "maple-leaf"))
    mapleLeafImageView.frame = CGRect(x: iconSize*10, y: i*iconSize, width: iconSize, height: iconSize)
    mapleLeafImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
    cardView.addSubview(mapleLeafImageView)
}
for i in 0...10 {
    let mapleLeafImageView = UIImageView(image: UIImage(named: "maple-leaf"))
    mapleLeafImageView.frame = CGRect(x: iconSize*i, y: iconSize*10, width: iconSize, height: iconSize)
    mapleLeafImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
    cardView.addSubview(mapleLeafImageView)

加上楓葉邊框的卡片

在右下角放上吃樹果的松鼠並調整角度。

let acornImageView = UIImageView(image: UIImage(named: "acorn"))
acornImageView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
acornImageView.transform = CGAffineTransform.identity.translatedBy(x: 200, y: 200).rotated(by: -10 * (.pi/100))
cardView.addSubview(acornImageView)
let squirrelImageView = UIImageView(image: UIImage(named: "squirrel"))
squirrelImageView.frame = CGRect(x: 0, y:0, width: 200, height: 200)
squirrelImageView.transform = CGAffineTransform.identity.translatedBy(x: 240, y: 230).rotated(by: 20 * (.pi/180))
cardView.addSubview(squirrelImageView)

加上松鼠和樹果的卡片

調整卡片邊框寬度及顏色，這邊顏色偷懶直接用systemBrown。

cardView.layer.borderWidth = 10
cardView.layer.borderColor = UIColor.systemBrown.cgColor

將卡片加上圓角，完成。

cardView.layer.cornerRadius = 30
cardView.clipsToBounds = true

程式碼筆記

位移、旋轉及縮放
CGAffineTransform.identity.translatedBy(x: , y: )
CGAffineTransform.identity..rotated(by: )
CGAffineTransform.identity.scaledBy(x: , y: )

Mask圖片
imageView.mask = maskImageView
(主要圖片.mask = 去背後的輪廓圖片)

View圓角設定
cardView.layer.cornerRadius = 10
cardView.clipsToBounds = true

View邊框設定
view.layer.borderWidth = 10
view.layer.borderColor = UIColor

附上作業連結

# 142 使用圖片，文字，emoji，邊框 & 圓角製作漂亮卡片

利用 mask 設計特別形狀的圖片