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

呈現畫面：

這是我家的李奧納多

作法如下：

先找一張要分享的圖案及一張剪影，再讓兩張圖片變得一樣大小，接著使用mask使兩張圖疊再一起。

Mask教學：

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

加入一個長、寬都比圖還要大的View當作底圖，如果發現圖沒有在正中央的話，可以用CGAffineTransform作位移。

使用迴圈for-in做花邊，設定好圖案及尺寸，並在迴圈內加入圖案且隨機旋轉，分別作出上、下、左、右的花邊，在加入底圖中，最後在調整邊框及角就完成了 ！

利用 CGAffineTransform 縮放，位移，旋轉和鏡像翻轉

附上程式碼：

import UIKit

let turtleImageView = UIImageView(image: UIImage(named: “turtle.jpeg”))

let faceImageView = UIImageView(image: UIImage(named: “face.png”))

let imagesView = UIImageView(image: UIImage(named: “images.png”))

faceImageView.frame = CGRect(x: 0, y: 0, width: 500, height: 600)

turtleImageView.contentMode = .scaleAspectFit

turtleImageView.frame = faceImageView.frame

turtleImageView.mask = faceImageView

let label = UILabel()

label.text = “卡哇邦嘎🐢”

label.font = UIFont.systemFont(ofSize: 20)

label.textColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)

label.frame = CGRect(x: 300, y: 200, width: 50, height: 50)

label.backgroundColor = .blue

label.sizeToFit()

turtleImageView.addSubview(label)

let backGroundvView = UIView(frame: CGRect(x: 0, y: 0, width: turtleImageView.frame.width+100, height: turtleImageView.frame.height+100))

backGroundvView.backgroundColor = UIColor(red: 0.2, green: 0.6, blue: 0.7 , alpha: 1)

backGroundvView.addSubview(turtleImageView)

turtleImageView.transform = CGAffineTransform(translationX: 60, y: 60)

let iconSize = 50

for i in 0…11{

let turtleImageView2 = UIImageView(image: UIImage(named: “images.png”))

turtleImageView2.frame = CGRect(x: iconSize*i, y: 0, width: iconSize, height: iconSize)

turtleImageView2.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0…(.pi*2)))

backGroundvView.addSubview(turtleImageView2)

}

for i in 0…11{

let turtleImageView2 = UIImageView(image: UIImage(named: “images.png”))

turtleImageView2.frame = CGRect(x: iconSize*i, y: iconSize*11, width: iconSize, height: iconSize)

turtleImageView2.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0…(.pi*2)))

backGroundvView.addSubview(turtleImageView2)

}

for i in 1…10{

let turtleImageView2 = UIImageView(image: UIImage(named: “images.png”))

turtleImageView2.frame = CGRect(x: 0, y: iconSize*i, width: iconSize, height: iconSize)

turtleImageView2.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0…(.pi*2)))

backGroundvView.addSubview(turtleImageView2)

}

for i in 1…10{

let turtleImageView2 = UIImageView(image: UIImage(named: “images.png”))

turtleImageView2.frame = CGRect(x: iconSize*11, y: iconSize*i, width: iconSize, height: iconSize)

turtleImageView2.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0…(.pi*2)))

backGroundvView.addSubview(turtleImageView2)

}

backGroundvView.layer.borderWidth = 5

backGroundvView.layer.borderColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor

backGroundvView.layer.cornerRadius = 50

backGroundvView.clipsToBounds = true

backGroundvView

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