IOS學習07|從程式製作國旗圖案
Published in
29 min readAug 9, 2024
～用程式製作奧運梅花旗～
1.旗幟部分
//flag background
var rect = CGRect(x: 0, y: 0, width: 518, height: 346)
let background = UIView(frame: rect)
background.backgroundColor = .white
2.梅花部分
a.第一層 → 藍色梅花
製造五個圓形來製作梅花
//blueflower
rect = CGRect(x: 192, y: 40, width: 135, height: 135)
var blueflower1 = UIView(frame: rect)
blueflower1.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower1.layer.cornerRadius = 67
background.addSubview(blueflower1)
rect = CGRect(x: 122, y: 100, width: 135, height: 135)
var blueflower2 = UIView(frame: rect)
blueflower2.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower2.layer.cornerRadius = 67
background.addSubview(blueflower2)
rect = CGRect(x: 150, y: 180, width: 135, height: 135)
var blueflower3 = UIView(frame: rect)
blueflower3.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower3.layer.cornerRadius = 67
background.addSubview(blueflower3)
rect = CGRect(x: 234, y: 180, width: 135, height: 135)
var blueflower4 = UIView(frame: rect)
blueflower4.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower4.layer.cornerRadius = 67
background.addSubview(blueflower4)
rect = CGRect(x: 262, y: 100, width: 135, height: 135)
var blueflower5 = UIView(frame: rect)
blueflower5.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower5.layer.cornerRadius = 67
background.addSubview(blueflower5)
再運用方塊將白色部分蓋住
rect = CGRect(x: 225, y: 160, width: 100, height: 100)
var blueflower = UIView(frame: rect)
blueflower.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
background.addSubview(blueflower)
接下來就運用此方式重複製作梅花🌸
b.第二層 → 白色梅花1
//whiteflower
rect = CGRect(x: 205, y: 58, width: 110, height: 110)
var whiteflower1 = UIView(frame: rect)
whiteflower1.backgroundColor = .white
whiteflower1.layer.cornerRadius = 55
background.addSubview(whiteflower1)
rect = CGRect(x: 140, y: 115, width: 110, height: 110)
var whiteflower2 = UIView(frame: rect)
whiteflower2.backgroundColor = .white
whiteflower2.layer.cornerRadius = 55
background.addSubview(whiteflower2)
rect = CGRect(x: 164, y: 190, width: 110, height: 110)
var whiteflower3 = UIView(frame: rect)
whiteflower3.backgroundColor = .white
whiteflower3.layer.cornerRadius = 55
background.addSubview(whiteflower3)
rect = CGRect(x: 244, y: 190, width: 110, height: 110)
var whiteflower4 = UIView(frame: rect)
whiteflower4.backgroundColor = .white
whiteflower4.layer.cornerRadius = 55
background.addSubview(whiteflower4)
rect = CGRect(x: 270, y: 115, width: 110, height: 110)
var whiteflower5 = UIView(frame: rect)
whiteflower5.backgroundColor = .white
whiteflower5.layer.cornerRadius = 55
background.addSubview(whiteflower5)
rect = CGRect(x: 215, y: 140, width: 120, height: 120)
var whiteflower = UIView(frame: rect)
whiteflower.backgroundColor = .white
background.addSubview(whiteflower)
c.第三層 → 紅色梅花
//redflower
rect = CGRect(x: 212, y: 70, width: 95, height: 95)
var redflower1 = UIView(frame: rect)
redflower1.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower1.layer.cornerRadius = 47.5
background.addSubview(redflower1)
rect = CGRect(x: 150, y: 125, width: 95, height: 95)
var redflower2 = UIView(frame: rect)
redflower2.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower2.layer.cornerRadius = 47.5
background.addSubview(redflower2)
rect = CGRect(x: 175, y: 195, width: 95, height: 95)
var redflower3 = UIView(frame: rect)
redflower3.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower3.layer.cornerRadius = 47.5
background.addSubview(redflower3)
rect = CGRect(x: 250, y: 195, width: 95, height:95)
var redflower4 = UIView(frame: rect)
redflower4.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower4.layer.cornerRadius = 47.5
background.addSubview(redflower4)
rect = CGRect(x: 275, y: 125, width: 95, height: 95)
var redflower5 = UIView(frame: rect)
redflower5.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower5.layer.cornerRadius = 47.5
background.addSubview(redflower5)
rect = CGRect(x: 215, y: 140, width: 100, height: 100)
var redflower = UIView(frame: rect)
redflower.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
background.addSubview(redflower)
d.第四層 → 白色梅花2
//whiteflower2
rect = CGRect(x: 220, y: 82, width:80, height: 80)
var wf1 = UIView(frame: rect)
wf1.backgroundColor = .white
wf1.layer.cornerRadius = 40
background.addSubview(wf1)
rect = CGRect(x: 163, y: 133, width:80, height: 80)
var wf2 = UIView(frame: rect)
wf2.backgroundColor = .white
wf2.layer.cornerRadius = 40
background.addSubview(wf2)
rect = CGRect(x: 186, y: 200, width:80, height: 80)
var wf3 = UIView(frame: rect)
wf3.backgroundColor = .white
wf3.layer.cornerRadius = 40
background.addSubview(wf3)
rect = CGRect(x: 256, y: 200, width:80, height: 80)
var wf4 = UIView(frame: rect)
wf4.backgroundColor = .white
wf4.layer.cornerRadius = 40
background.addSubview(wf4)
rect = CGRect(x: 280, y: 133, width:80, height: 80)
var wf5 = UIView(frame: rect)
wf5.backgroundColor = .white
wf5.layer.cornerRadius = 40
background.addSubview(wf5)
rect = CGRect(x: 215, y: 140, width: 100, height: 100)
var wf = UIView(frame: rect)
wf.backgroundColor = .white
background.addSubview(wf)
3.太陽部分
a.建立圓形(一藍一白)
//sun
rect = CGRect(x: 227, y: 130, width: 66, height: 66)
var bluecircle = UIView(frame: rect)
bluecircle.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
bluecircle.layer.cornerRadius = 33
background.addSubview(bluecircle)
rect = CGRect(x: 244.5, y: 146.5, width: 32, height: 32)
var whitecircle = UIView(frame: rect)
whitecircle.backgroundColor = .white
whitecircle.layer.cornerRadius = 16
background.addSubview(whitecircle)
b.加入三角形
運用 UIBezierPath 繪製三角形並加入
//tri
let triframe = CGRect(x: 228, y: 130, width: 65, height: 65)
var rectWhiteTri = UIView(frame: triframe)
rectWhiteTri.backgroundColor = .white
let triPath = UIBezierPath()
triPath.move(to: CGPoint(x: 32, y: 2))
triPath.addLine(to: CGPoint(x: 27, y: 13))
triPath.addLine(to: CGPoint(x:37 , y: 13))
triPath.close()
let triShape = CAShapeLayer()
triShape.path=triPath.cgPath
triShape.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
rectWhiteTri.layer.mask = triShape
background.addSubview(rectWhiteTri)
c.製作多個三角形
參考上方文章運用
transform=CGAffineTransform(rotationAngle:CGFloat.pi/180*30*Double(i))
將三角形進行旋轉後生成
//tri2
var rectWhiteTri2 = UIView(frame: triframe)
rectWhiteTri2.backgroundColor = .white
let triShape2 = CAShapeLayer()
triShape2.path=triPath.cgPath
triShape2.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
rectWhiteTri2.layer.mask = triShape2
//旋轉
rectWhiteTri2.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*30)
background.addSubview(rectWhiteTri2)
💡運用for迴圈將12個三角形一次生成
//tri
let triframe = CGRect(x: 228, y: 130, width: 65, height: 65)
for i in 0...12{
var rectWhiteTri = UIView(frame: triframe)
rectWhiteTri.backgroundColor = .white
//background.addSubview(rectWhiteTri)
let triPath = UIBezierPath()
triPath.move(to: CGPoint(x: 32, y: 2))
triPath.addLine(to: CGPoint(x: 27, y: 13))
triPath.addLine(to: CGPoint(x:37 , y: 13))
triPath.close()
let triShape = CAShapeLayer()
triShape.path=triPath.cgPath
triShape.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
rectWhiteTri.layer.mask = triShape
rectWhiteTri.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*30*Double(i))
background.addSubview(rectWhiteTri)
}
(三角形畫面一起出來好有成就感🤩)
4.奧運五環部分
這部分因為比較複雜所以就用圖片來作弊一下🤣
//olympic
let olympicImage = UIImage(named: "olympic")
let olympicView = UIImageView(image: olympicImage)
olympicView.frame = CGRect(x: 200, y: 197, width: 120, height: 60)
background.addSubview(olympicView)
這樣奧運梅花旗就完成囉！雖然比例有點不太對但我覺得還算滿意😆
附上程式碼：
import UIKit
var rect = CGRect(x: 0, y: 0, width: 518, height: 346)
let background = UIView(frame: rect)
background.backgroundColor = .white
//blueflower
rect = CGRect(x: 192, y: 40, width: 135, height: 135)
var blueflower1 = UIView(frame: rect)
blueflower1.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower1.layer.cornerRadius = 67
background.addSubview(blueflower1)
rect = CGRect(x: 122, y: 100, width: 135, height: 135)
var blueflower2 = UIView(frame: rect)
blueflower2.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower2.layer.cornerRadius = 67
background.addSubview(blueflower2)
rect = CGRect(x: 150, y: 180, width: 135, height: 135)
var blueflower3 = UIView(frame: rect)
blueflower3.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower3.layer.cornerRadius = 67
background.addSubview(blueflower3)
rect = CGRect(x: 234, y: 180, width: 135, height: 135)
var blueflower4 = UIView(frame: rect)
blueflower4.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower4.layer.cornerRadius = 67
background.addSubview(blueflower4)
rect = CGRect(x: 262, y: 100, width: 135, height: 135)
var blueflower5 = UIView(frame: rect)
blueflower5.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
blueflower5.layer.cornerRadius = 67
background.addSubview(blueflower5)
rect = CGRect(x: 225, y: 160, width: 100, height: 100)
var blueflower = UIView(frame: rect)
blueflower.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
background.addSubview(blueflower)
//whiteflower
rect = CGRect(x: 205, y: 58, width: 110, height: 110)
var whiteflower1 = UIView(frame: rect)
whiteflower1.backgroundColor = .white
whiteflower1.layer.cornerRadius = 55
background.addSubview(whiteflower1)
rect = CGRect(x: 140, y: 115, width: 110, height: 110)
var whiteflower2 = UIView(frame: rect)
whiteflower2.backgroundColor = .white
whiteflower2.layer.cornerRadius = 55
background.addSubview(whiteflower2)
rect = CGRect(x: 164, y: 190, width: 110, height: 110)
var whiteflower3 = UIView(frame: rect)
whiteflower3.backgroundColor = .white
whiteflower3.layer.cornerRadius = 55
background.addSubview(whiteflower3)
rect = CGRect(x: 244, y: 190, width: 110, height: 110)
var whiteflower4 = UIView(frame: rect)
whiteflower4.backgroundColor = .white
whiteflower4.layer.cornerRadius = 55
background.addSubview(whiteflower4)
rect = CGRect(x: 270, y: 115, width: 110, height: 110)
var whiteflower5 = UIView(frame: rect)
whiteflower5.backgroundColor = .white
whiteflower5.layer.cornerRadius = 55
background.addSubview(whiteflower5)
rect = CGRect(x: 215, y: 140, width: 120, height: 120)
var whiteflower = UIView(frame: rect)
whiteflower.backgroundColor = .white
background.addSubview(whiteflower)
//redflower
rect = CGRect(x: 212, y: 70, width: 95, height: 95)
var redflower1 = UIView(frame: rect)
redflower1.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower1.layer.cornerRadius = 47.5
background.addSubview(redflower1)
rect = CGRect(x: 150, y: 125, width: 95, height: 95)
var redflower2 = UIView(frame: rect)
redflower2.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower2.layer.cornerRadius = 47.5
background.addSubview(redflower2)
rect = CGRect(x: 175, y: 195, width: 95, height: 95)
var redflower3 = UIView(frame: rect)
redflower3.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower3.layer.cornerRadius = 47.5
background.addSubview(redflower3)
rect = CGRect(x: 250, y: 195, width: 95, height:95)
var redflower4 = UIView(frame: rect)
redflower4.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower4.layer.cornerRadius = 47.5
background.addSubview(redflower4)
rect = CGRect(x: 275, y: 125, width: 95, height: 95)
var redflower5 = UIView(frame: rect)
redflower5.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
redflower5.layer.cornerRadius = 47.5
background.addSubview(redflower5)
rect = CGRect(x: 215, y: 140, width: 100, height: 100)
var redflower = UIView(frame: rect)
redflower.backgroundColor = UIColor(red: 227/255, green: 32/255, blue: 32/255, alpha: 1)
background.addSubview(redflower)
//whiteflower2
rect = CGRect(x: 220, y: 82, width:80, height: 80)
var wf1 = UIView(frame: rect)
wf1.backgroundColor = .white
wf1.layer.cornerRadius = 40
background.addSubview(wf1)
rect = CGRect(x: 163, y: 133, width:80, height: 80)
var wf2 = UIView(frame: rect)
wf2.backgroundColor = .white
wf2.layer.cornerRadius = 40
background.addSubview(wf2)
rect = CGRect(x: 186, y: 200, width:80, height: 80)
var wf3 = UIView(frame: rect)
wf3.backgroundColor = .white
wf3.layer.cornerRadius = 40
background.addSubview(wf3)
rect = CGRect(x: 256, y: 200, width:80, height: 80)
var wf4 = UIView(frame: rect)
wf4.backgroundColor = .white
wf4.layer.cornerRadius = 40
background.addSubview(wf4)
rect = CGRect(x: 280, y: 133, width:80, height: 80)
var wf5 = UIView(frame: rect)
wf5.backgroundColor = .white
wf5.layer.cornerRadius = 40
background.addSubview(wf5)
rect = CGRect(x: 215, y: 140, width: 100, height: 100)
var wf = UIView(frame: rect)
wf.backgroundColor = .white
background.addSubview(wf)
//sun
rect = CGRect(x: 227, y: 130, width: 66, height: 66)
var bluecircle = UIView(frame: rect)
bluecircle.backgroundColor = UIColor(red: 0, green: 50/255, blue: 131/255, alpha: 1)
bluecircle.layer.cornerRadius = 33
background.addSubview(bluecircle)
rect = CGRect(x: 244.5, y: 146.5, width: 32, height: 32)
var whitecircle = UIView(frame: rect)
whitecircle.backgroundColor = .white
whitecircle.layer.cornerRadius = 16
background.addSubview(whitecircle)
//tri
let triframe = CGRect(x: 228, y: 130, width: 65, height: 65)
for i in 0...12{
var rectWhiteTri = UIView(frame: triframe)
rectWhiteTri.backgroundColor = .white
//background.addSubview(rectWhiteTri)
let triPath = UIBezierPath()
triPath.move(to: CGPoint(x: 32, y: 2))
triPath.addLine(to: CGPoint(x: 27, y: 13))
triPath.addLine(to: CGPoint(x:37 , y: 13))
triPath.close()
let triShape = CAShapeLayer()
triShape.path=triPath.cgPath
triShape.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
rectWhiteTri.layer.mask = triShape
rectWhiteTri.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*30*Double(i))
background.addSubview(rectWhiteTri)
}
background
//olympic
let olympicImage = UIImage(named: "olympic")
let olympicView = UIImageView(image: olympicImage)
olympicView.frame = CGRect(x: 200, y: 197, width: 120, height: 60)
background.addSubview(olympicView)