#3 製作可愛Aliens(三眼怪)卡片,用程式也行哦~
Published in
6 min readOct 31, 2022
由於太太很喜歡三眼怪,再加上老是唸叨很久沒送卡片了,順便展現一下技術給她看~就用程式製作一張三眼怪小可愛卡片送她吧~
先來看一下成品圖:
主要使用工具元件:
Playground、UIImage、UIImageView、UILabel
1.先將圖片加入Playground左側導覽列的Resources資料夾中(檔名:aliens.jpeg)
2.使用UIImage元件產生圖片
let image = UIImage(named: "aliens.jpeg")
3.產生圖片片畫面UIImageView
let imageView = UIImageView(image: image)
4.設定圖片的位置長寬、圖片呈現方式、透明度、4個角設為圓角
//位置長寬
imageView.frame = CGRect(x: 0, y: 0, width: 1000, height: 1000)//圖片呈現方式
imageView.contentMode = .scaleToFill
//透明度
imageView.alpha = 0.7
//4個角設為圓角
imageView.layer.cornerRadius = 70
imageView.clipsToBounds = true
5.用UILabel在圖片上想要的位置顯示想表達的文字
//文字-1
//顯示的位置及Label的大小
let messageLabel1 = UILabel(frame: CGRect(x: 250, y: 80, width: 500, height: 50))//設定文字大小
messageLabel1.font = UIFont.systemFont(ofSize: 40)//Label中加入想顯示的文字內容
messageLabel1.text = "Meow 永遠快樂~"//使用addSubview method將Label加入畫面imageView.addSubview(messageLabel1)//文字-2
let messageLabel2 = UILabel(frame: CGRect(x: 650, y: 560, width: 500, height: 100))
messageLabel2.font = UIFont.systemFont(ofSize: 23)//將Label設定可以輸入多行
messageLabel2.numberOfLines = 0messageLabel2.text = "Oh~oh~ \n I love you forever~❤️"
imageView.addSubview(messageLabel2)
6.加入圖片周圍的爪子圖(檔名:claw.png)
7.將爪子圖片(claw.png)放入Label元件,設定位置及旋轉角度,並圍繞圖片四周
//產生圖片
let meowClaw = UIImage(named: "claw.png")//宣告變數
var meowClawView = UIImageView()
var emojiLabel = UILabel()
var x = 0
var y = 0//使用for loop將爪子圖圍繞在主圖的四周
//左右2邊
for _ in 1...10 {
meowClawView = UIImageView(image: meowClaw)
meowClawView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
emojiLabel = UILabel(frame: CGRect(x: 0, y: y, width: 100, height: 100))
emojiLabel.addSubview(meowClawView)
//旋轉角度
emojiLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 45)
imageView.addSubview(emojiLabel)
y += 100
}y = 0
for _ in 1...10 {
meowClawView = UIImageView(image: meowClaw)
meowClawView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
emojiLabel = UILabel(frame: CGRect(x: 900, y: y, width: 100, height: 100))
emojiLabel.addSubview(meowClawView)
emojiLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * (-45))
imageView.addSubview(emojiLabel)
y += 100
}//上下2邊
for _ in 1...8 {
meowClawView = UIImageView(image: meowClaw)
meowClawView.frame = CGRect(x: 100, y: 0, width: 100, height: 100)
emojiLabel = UILabel(frame: CGRect(x: x, y: 0, width: 100, height: 100))
emojiLabel.addSubview(meowClawView)
// emojiLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 45)
imageView.addSubview(emojiLabel)
x += 100
}x = 0
for _ in 1...8 {
meowClawView = UIImageView(image: meowClaw)
meowClawView.frame = CGRect(x: 100, y: 0, width: 100, height: 100)
emojiLabel = UILabel(frame: CGRect(x: x, y: 900, width: 100, height: 100))
emojiLabel.addSubview(meowClawView)
// emojiLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * (-45))
imageView.addSubview(emojiLabel)
x += 100
}//在Playground顯示做好的卡片
imageView
完整程式碼: