[IOS APP]中華民國萬歲！🇹🇼國旗製作🇹🇼

一看到要製作國旗，讓我第一個想到的就是我站的這片土地------台灣🇹🇼！

台灣國旗是由青天、白日、滿地紅所組成，想一想青天和滿地紅應該都還

算簡單甚至是白日的那個圓，最最最困難的絕對就是那12道光芒！但又覺

得一定要做出來！！雖然路途艱辛，過程中也如想像的一般處處碰壁，跌

的頭破血流，不過關關難過關關過，有我們最優秀的Peter指點迷津，讓我

在愛台灣的同時又不被艱難打敗，真是我們最強大的後盾～～

廢話了這麼多，終於可以開始我們的主題了！！首先先上了Wikipedia來看

看我們國旗的規格～

果然是非常的詳細，連顏色都有，真是一應俱全，可是我要的是RGB呀！

於是只好再利用線上轉換器來轉換，到目前為止都還是很順利的進行。

Part1是滿地紅

let frame1 = CGRect(x: 0, y: 0, width: 120, height:80)
var rectRed = UIView(frame: frame1)
rectRed.backgroundColor = UIColor(red: 242/255, green: 0, blue: 0, alpha: 1)
let flagRedPath = UIBezierPath()
var point = CGPoint(x: 60, y: 0)
flagRedPath.move(to: point)
point = CGPoint(x: 120, y: 0)
flagRedPath.addLine(to: point)
point = CGPoint(x: 120, y: 80)
flagRedPath.addLine(to: point)
point = CGPoint(x: 0, y: 80)
flagRedPath.addLine(to: point)
point = CGPoint(x: 0, y: 40)
flagRedPath.addLine(to: point)
point = CGPoint(x: 60, y: 40)
flagRedPath.addLine(to: point)
point = CGPoint(x: 60, y: 0)
flagRedPath.close()
let maskLayer0 = CAShapeLayer()
maskLayer0.path = flagRedPath.cgPath
rectRed.layer.mask = maskLayer0
rectRed

利用Peter的秘笈來完成第一個部分，也順利的過關！

利用 CAShapeLayer 和 mask 將 View 變成任意形狀

Part2是青天

let frame2 = CGRect(x: 0, y: 0, width: 60, height: 40)
var rectBlue = UIView(frame: frame2)
rectBlue.backgroundColor = UIColor(red: 0, green: 41/255, blue: 204/255, alpha: 1)
rectBlue

也是最容易的部分

可是沒想到把青天和滿地紅做結合時卻讓我遇到了第一的問題，第一次的

Call out出現了，原來只要再用一個新的View來裝下其他的，便迎刃而解！

let view = UIView(frame: CGRect(x: 0, y: 0, width: 120, height: 80))
view.addSubview(rectRed)
print(rectBlue.frame)
view.addSubview(rectBlue)

Part3是白日

let frame3 = CGRect(x: 22.5, y: 12.5, width: 60/4, height: 60/4)
var rectWhite = UIView(frame: frame3)
rectWhite.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
rectWhite.layer.cornerRadius = 60/8
rectWhite

稍微算了一下位置，也是順利的通過～

Part4是12道光芒

這裡是所有過程中最困難的地方，也是第二次的Call out~

關卡1 三角形的製作

一樣先利用什麼的CAShapeLayer和mask來描繪三角形的輪廓，但三角形的

三點座標不如滿地紅的一樣和藹可親一眼可知，只好利用曾經學過的三角

函數又正好旁邊有紙筆，搭配凌亂的筆跡，終於讓我完成第一個三角形！

let frame4 = CGRect(x: 0, y: 0, width: 60, height: 40)
var rectWhiteTriangle = UIView(frame: frame4)
rectWhiteTriangle.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle = UIBezierPath()
var point1 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle.move(to: point1)
point1 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle.addLine(to: point1)
point1 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle.addLine(to: point1)
point1 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle.close()
let maskLayer1 = CAShapeLayer()
maskLayer1.path = flagWhiteTriangle.cgPath
rectWhiteTriangle.layer.mask = maskLayer1

關卡2 其他11個三角形

想當然其他的11個三角形不可能再用座標一個一個描繪出來，勢必是需要

利用旋轉的概念來完成，但是我還不會旋轉呀！！！！還好雖然我不會旋

轉但是我有一個堅強的後盾Peter，原來只需一個指令世界便開始旋轉了！

var rectWhiteTriangle2 = UIView(frame: frame4)
rectWhiteTriangle2.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle2 = UIBezierPath()
var point2 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle2.move(to: point2)
point2 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle2.addLine(to: point2)
point2 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle2.addLine(to: point2)
point2 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle2.close()
let maskLayer2 = CAShapeLayer()
maskLayer2.path = flagWhiteTriangle2.cgPath
rectWhiteTriangle2.layer.mask = maskLayer2
rectWhiteTriangle2.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*30)

關鍵的最後一行，讓三角形轉動了！

其餘的三角形再改變旋轉角度就可以一個一個跑出來

終於國旗誕生了，這得來不易的成果伴隨著就是久久掛在臉上難以消散

的笑容，真是太感動了！！！！

最後附上全部完整的程式碼

import UIKit
let frame1 = CGRect(x: 0, y: 0, width: 120, height:80)
var rectRed = UIView(frame: frame1)
rectRed.backgroundColor = UIColor(red: 242/255, green: 0, blue: 0, alpha: 1)
let flagRedPath = UIBezierPath()
var point = CGPoint(x: 60, y: 0)
flagRedPath.move(to: point)
point = CGPoint(x: 120, y: 0)
flagRedPath.addLine(to: point)
point = CGPoint(x: 120, y: 80)
flagRedPath.addLine(to: point)
point = CGPoint(x: 0, y: 80)
flagRedPath.addLine(to: point)
point = CGPoint(x: 0, y: 40)
flagRedPath.addLine(to: point)
point = CGPoint(x: 60, y: 40)
flagRedPath.addLine(to: point)
point = CGPoint(x: 60, y: 0)
flagRedPath.close()
let maskLayer0 = CAShapeLayer()
maskLayer0.path = flagRedPath.cgPath
rectRed.layer.mask = maskLayer0
rectRed
let frame2 = CGRect(x: 0, y: 0, width: 60, height: 40)
var rectBlue = UIView(frame: frame2)
rectBlue.backgroundColor = UIColor(red: 0, green: 41/255, blue: 204/255, alpha: 1)
rectBlue
let frame3 = CGRect(x: 22.5, y: 12.5, width: 60/4, height: 60/4)
var rectWhite = UIView(frame: frame3)
rectWhite.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
rectWhite.layer.cornerRadius = 60/8
rectWhite
let frame4 = CGRect(x: 0, y: 0, width: 60, height: 40)
var rectWhiteTriangle = UIView(frame: frame4)
rectWhiteTriangle.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle = UIBezierPath()
var point1 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle.move(to: point1)
point1 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle.addLine(to: point1)
point1 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle.addLine(to: point1)
point1 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle.close()
let maskLayer1 = CAShapeLayer()
maskLayer1.path = flagWhiteTriangle.cgPath
rectWhiteTriangle.layer.mask = maskLayer1
var rectWhiteTriangle2 = UIView(frame: frame4)
rectWhiteTriangle2.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle2 = UIBezierPath()
var point2 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle2.move(to: point2)
point2 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle2.addLine(to: point2)
point2 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle2.addLine(to: point2)
point2 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle2.close()
let maskLayer2 = CAShapeLayer()
maskLayer2.path = flagWhiteTriangle2.cgPath
rectWhiteTriangle2.layer.mask = maskLayer2
rectWhiteTriangle2.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*30)
var rectWhiteTriangle3 = UIView(frame: frame4)
rectWhiteTriangle3.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle3 = UIBezierPath()
var point3 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle3.move(to: point3)
point3 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle3.addLine(to: point3)
point3 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle3.addLine(to: point3)
point3 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle3.close()
let maskLayer3 = CAShapeLayer()
maskLayer3.path = flagWhiteTriangle3.cgPath
rectWhiteTriangle3.layer.mask = maskLayer3
rectWhiteTriangle3.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*60)
var rectWhiteTriangle4 = UIView(frame: frame4)
rectWhiteTriangle4.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle4 = UIBezierPath()
var point4 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle4.move(to: point4)
point4 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle4.addLine(to: point4)
point4 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle4.addLine(to: point4)
point4 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle4.close()
let maskLayer4 = CAShapeLayer()
maskLayer4.path = flagWhiteTriangle4.cgPath
rectWhiteTriangle4.layer.mask = maskLayer4
rectWhiteTriangle4.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*90)
var rectWhiteTriangle5 = UIView(frame: frame4)
rectWhiteTriangle5.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle5 = UIBezierPath()
var point5 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle5.move(to: point5)
point5 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle5.addLine(to: point5)
point5 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle5.addLine(to: point5)
point5 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle5.close()
let maskLayer5 = CAShapeLayer()
maskLayer5.path = flagWhiteTriangle3.cgPath
rectWhiteTriangle5.layer.mask = maskLayer5
rectWhiteTriangle5.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*120)
var rectWhiteTriangle6 = UIView(frame: frame4)
rectWhiteTriangle6.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle6 = UIBezierPath()
var point6 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle6.move(to: point6)
point6 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle6.addLine(to: point6)
point6 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle6.addLine(to: point6)
point6 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle6.close()
let maskLayer6 = CAShapeLayer()
maskLayer6.path = flagWhiteTriangle6.cgPath
rectWhiteTriangle6.layer.mask = maskLayer6
rectWhiteTriangle6.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*150)
var rectWhiteTriangle7 = UIView(frame: frame4)
rectWhiteTriangle7.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle7 = UIBezierPath()
var point7 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle7.move(to: point7)
point7 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle7.addLine(to: point7)
point7 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle7.addLine(to: point7)
point7 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle7.close()
let maskLayer7 = CAShapeLayer()
maskLayer7.path = flagWhiteTriangle7.cgPath
rectWhiteTriangle7.layer.mask = maskLayer7
rectWhiteTriangle7.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*180)
var rectWhiteTriangle8 = UIView(frame: frame4)
rectWhiteTriangle8.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle8 = UIBezierPath()
var point8 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle8.move(to: point8)
point8 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle8.addLine(to: point8)
point8 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle8.addLine(to: point8)
point8 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle8.close()
let maskLayer8 = CAShapeLayer()
maskLayer8.path = flagWhiteTriangle8.cgPath
rectWhiteTriangle8.layer.mask = maskLayer8
rectWhiteTriangle8.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*(-30))
var rectWhiteTriangle9 = UIView(frame: frame4)
rectWhiteTriangle9.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle9 = UIBezierPath()
var point9 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle9.move(to: point9)
point9 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle9.addLine(to: point9)
point9 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle9.addLine(to: point9)
point9 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle9.close()
let maskLayer9 = CAShapeLayer()
maskLayer9.path = flagWhiteTriangle9.cgPath
rectWhiteTriangle9.layer.mask = maskLayer9
rectWhiteTriangle9.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*(-60))
var rectWhiteTriangle10 = UIView(frame: frame4)
rectWhiteTriangle10.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle10 = UIBezierPath()
var point10 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle10.move(to: point10)
point10 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle10.addLine(to: point10)
point10 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle10.addLine(to: point10)
point10 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle10.close()
let maskLayer10 = CAShapeLayer()
maskLayer10.path = flagWhiteTriangle10.cgPath
rectWhiteTriangle10.layer.mask = maskLayer10
rectWhiteTriangle10.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*(-90))
var rectWhiteTriangle11 = UIView(frame: frame4)
rectWhiteTriangle11.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle11 = UIBezierPath()
var point11 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle11.move(to: point11)
point11 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle11.addLine(to: point11)
point11 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle11.addLine(to: point11)
point11 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle11.close()
let maskLayer11 = CAShapeLayer()
maskLayer11.path = flagWhiteTriangle11.cgPath
rectWhiteTriangle11.layer.mask = maskLayer11
rectWhiteTriangle11.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*(-120))
var rectWhiteTriangle12 = UIView(frame: frame4)
rectWhiteTriangle12.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let flagWhiteTriangle12 = UIBezierPath()
var point12 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle12.move(to: point8)
point12 = CGPoint(x: 30+6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle12.addLine(to: point12)
point12 = CGPoint(x: 30-6.5*tan(Double.pi/12), y: (40-17)/2)
flagWhiteTriangle12.addLine(to: point12)
point12 = CGPoint(x: 120/4, y: 40/8)
flagWhiteTriangle12.close()
let maskLayer12 = CAShapeLayer()
maskLayer12.path = flagWhiteTriangle12.cgPath
rectWhiteTriangle12.layer.mask = maskLayer12
rectWhiteTriangle12.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*(-150))
let view = UIView(frame: CGRect(x: 0, y: 0, width: 120, height: 80))
view.addSubview(rectRed)
print(rectBlue.frame)
view.addSubview(rectBlue)
view.addSubview(rectWhite)
view.addSubview(rectWhiteTriangle)
view.addSubview(rectWhiteTriangle2)
view.addSubview(rectWhiteTriangle3)
view.addSubview(rectWhiteTriangle4)
view.addSubview(rectWhiteTriangle5)
view.addSubview(rectWhiteTriangle6)
view.addSubview(rectWhiteTriangle7)
view.addSubview(rectWhiteTriangle8)
view.addSubview(rectWhiteTriangle9)
view.addSubview(rectWhiteTriangle10)
view.addSubview(rectWhiteTriangle11)
view.addSubview(rectWhiteTriangle12)

總覺得其他的三角形可以用Func來簡化～

總之完成了🇹🇼🇹🇼🇹🇼