使用 UIBezierPath 繪製 Tokyo 2020 Summer Olympics LOGO | 練習實作 #3

對一個 Swift 超級新手而言，基礎語法摸索中仍一知半解，除了要深入了解每一段用國語字、英文字母都看得懂但組合在一起就像天書一樣的程式碼及說明外，還有宇宙無敵可怕的數學邏輯要去理解！在面對延宕多日、得用程式製作的作業，練習一開始就陷入瘋狂座標地獄，好不容易突破重圍後，馬上又掉入圓周還是角度什麼鬼的黑洞裡，整個就是消耗掉很多時間，大腦不知道當機了千百回 ⋯⋯ 雖然挑戰的過程冗長，但當第一次執行程式後看到部份圖樣成功的呈現在畫面上，內心狂喜；當整個練習作品完成的瞬間，真的超想大喊

開心之餘，理智提醒了我得繼續追趕更多、更多、更多 ⋯⋯ 更多進度落後的作業 ⋯⋯ 🐌 🐌 🐌 🐌 ⋯⋯ 就醬子，廢話到此完畢。

LOGO 上方用無數個不規則的四方形集結而成的圓形圖，先繪製外圈，接著再接回內圈，整個概念就是類似遊戲「Number link」一樣，接續劃出線條但不重覆，所以這部份除了找座標找到快瘋掉，連連看也讓眼睛快瞎了。

//outside frames
let rectBluePath = UIBezierPath()
rectBluePath.move(to: CGPoint(x: 196, y: 26))
rectBluePath.addLine(to: CGPoint(x: 243, y: 26))
rectBluePath.addLine(to: CGPoint(x: 243, y: 38))
rectBluePath.addLine(to: CGPoint(x: 284, y: 50))
rectBluePath.addLine(to: CGPoint(x: 290, y: 39))
rectBluePath.addLine(to: CGPoint(x: 330, y: 62))
rectBluePath.addLine(to: CGPoint(x: 324, y: 73))
rectBluePath.addLine(to: CGPoint(x: 324, y: 85))
rectBluePath.addLine(to: CGPoint(x: 330, y: 96))
rectBluePath.addLine(to: CGPoint(x: 365, y: 96))
rectBluePath.addLine(to: CGPoint(x: 365, y: 130))
rectBluePath.addLine(to: CGPoint(x: 387, y: 136))
rectBluePath.addLine(to: CGPoint(x: 377, y: 176))
rectBluePath.addLine(to: CGPoint(x: 388, y: 183))
rectBluePath.addLine(to: CGPoint(x: 400, y: 183))
rectBluePath.addLine(to: CGPoint(x: 400, y: 230))
rectBluePath.addLine(to: CGPoint(x: 388, y: 230))
rectBluePath.addLine(to: CGPoint(x: 377, y: 270))
rectBluePath.addLine(to: CGPoint(x: 388, y: 277))
rectBluePath.addLine(to: CGPoint(x: 364, y: 317))
rectBluePath.addLine(to: CGPoint(x: 353, y: 311))
rectBluePath.addLine(to: CGPoint(x: 324, y: 340))
rectBluePath.addLine(to: CGPoint(x: 330, y: 352))
rectBluePath.addLine(to: CGPoint(x: 290, y: 374))
rectBluePath.addLine(to: CGPoint(x: 283, y: 364))
rectBluePath.addLine(to: CGPoint(x: 273, y: 357))
rectBluePath.addLine(to: CGPoint(x: 260, y: 357))
rectBluePath.addLine(to: CGPoint(x: 243, y: 387))
rectBluePath.addLine(to: CGPoint(x: 213, y: 370))
rectBluePath.addLine(to: CGPoint(x: 196, y: 387))
rectBluePath.addLine(to: CGPoint(x: 166, y: 357))
rectBluePath.addLine(to: CGPoint(x: 155, y: 364))
rectBluePath.addLine(to: CGPoint(x: 150, y: 374))
rectBluePath.addLine(to: CGPoint(x: 109, y: 352))
rectBluePath.addLine(to: CGPoint(x: 115, y: 340))
rectBluePath.addLine(to: CGPoint(x: 86, y: 311))
rectBluePath.addLine(to: CGPoint(x: 74, y: 317))
rectBluePath.addLine(to: CGPoint(x: 51, y: 277))
rectBluePath.addLine(to: CGPoint(x: 62, y: 270))
rectBluePath.addLine(to: CGPoint(x: 51, y: 230))
rectBluePath.addLine(to: CGPoint(x: 39, y: 230))
rectBluePath.addLine(to: CGPoint(x: 39, y: 183))
rectBluePath.addLine(to: CGPoint(x: 51, y: 183))
rectBluePath.addLine(to: CGPoint(x: 62, y: 176))
rectBluePath.addLine(to: CGPoint(x: 69, y: 166))
rectBluePath.addLine(to: CGPoint(x: 59, y: 136))
rectBluePath.addLine(to: CGPoint(x: 81, y: 120))
rectBluePath.addLine(to: CGPoint(x: 74, y: 96))
rectBluePath.addLine(to: CGPoint(x: 115, y: 85))
rectBluePath.addLine(to: CGPoint(x: 115, y: 73))
rectBluePath.addLine(to: CGPoint(x: 109, y: 62))
rectBluePath.addLine(to: CGPoint(x: 150, y: 39))
rectBluePath.addLine(to: CGPoint(x: 155, y: 50))
rectBluePath.addLine(to: CGPoint(x: 196, y: 38))
//inside frames
rectBluePath.addLine(to: CGPoint(x: 202, y: 62))
rectBluePath.addLine(to: CGPoint(x: 237, y: 62))
rectBluePath.addLine(to: CGPoint(x: 237, y: 96))
rectBluePath.addLine(to: CGPoint(x: 202, y: 96))
rectBluePath.addLine(to: CGPoint(x: 202, y: 62))
rectBluePath.addLine(to: CGPoint(x: 162, y: 73))
rectBluePath.addLine(to: CGPoint(x: 155, y: 50))
rectBluePath.addLine(to: CGPoint(x: 115, y: 73))
rectBluePath.addLine(to: CGPoint(x: 162, y: 73))
rectBluePath.addLine(to: CGPoint(x: 162, y: 85))
rectBluePath.addLine(to: CGPoint(x: 202, y: 96))
rectBluePath.addLine(to: CGPoint(x: 196, y: 119))
rectBluePath.addLine(to: CGPoint(x: 155, y: 108))
rectBluePath.addLine(to: CGPoint(x: 162, y: 85))
rectBluePath.addLine(to: CGPoint(x: 115, y: 85))
rectBluePath.addLine(to: CGPoint(x: 122, y: 108))
rectBluePath.addLine(to: CGPoint(x: 155, y: 108))
rectBluePath.addLine(to: CGPoint(x: 155, y: 142))
rectBluePath.addLine(to: CGPoint(x: 122, y: 142))
rectBluePath.addLine(to: CGPoint(x: 122, y: 108))
rectBluePath.addLine(to: CGPoint(x: 81, y: 120))
rectBluePath.addLine(to: CGPoint(x: 98, y: 149))
rectBluePath.addLine(to: CGPoint(x: 122, y: 142))
rectBluePath.addLine(to: CGPoint(x: 132, y: 183))
rectBluePath.addLine(to: CGPoint(x: 109, y: 189))
rectBluePath.addLine(to: CGPoint(x: 98, y: 149))
rectBluePath.addLine(to: CGPoint(x: 69, y: 166))
rectBluePath.addLine(to: CGPoint(x: 109, y: 189))
rectBluePath.addLine(to: CGPoint(x: 103, y: 200))
rectBluePath.addLine(to: CGPoint(x: 132, y: 230))
rectBluePath.addLine(to: CGPoint(x: 115, y: 247))
rectBluePath.addLine(to: CGPoint(x: 86, y: 217))
rectBluePath.addLine(to: CGPoint(x: 103, y: 200))
rectBluePath.addLine(to: CGPoint(x: 62, y: 176))
rectBluePath.addLine(to: CGPoint(x: 86, y: 217))
rectBluePath.addLine(to: CGPoint(x: 75, y: 224))
rectBluePath.addLine(to: CGPoint(x: 51, y: 183))
rectBluePath.addLine(to: CGPoint(x: 51, y: 230))
rectBluePath.addLine(to: CGPoint(x: 75, y: 224))
rectBluePath.addLine(to: CGPoint(x: 86, y: 264))
rectBluePath.addLine(to: CGPoint(x: 115, y: 247))
rectBluePath.addLine(to: CGPoint(x: 132, y: 277))
rectBluePath.addLine(to: CGPoint(x: 155, y: 270))
rectBluePath.addLine(to: CGPoint(x: 166, y: 311))
rectBluePath.addLine(to: CGPoint(x: 143, y: 317))
rectBluePath.addLine(to: CGPoint(x: 132, y: 277))
rectBluePath.addLine(to: CGPoint(x: 103, y: 294))
rectBluePath.addLine(to: CGPoint(x: 86, y: 264))
rectBluePath.addLine(to: CGPoint(x: 62, y: 270))
rectBluePath.addLine(to: CGPoint(x: 86, y: 311))
rectBluePath.addLine(to: CGPoint(x: 103, y: 294))
rectBluePath.addLine(to: CGPoint(x: 132, y: 323))
rectBluePath.addLine(to: CGPoint(x: 115, y: 340))
rectBluePath.addLine(to: CGPoint(x: 155, y: 364))
rectBluePath.addLine(to: CGPoint(x: 132, y: 323))
rectBluePath.addLine(to: CGPoint(x: 143, y: 317))
rectBluePath.addLine(to: CGPoint(x: 166, y: 357))
rectBluePath.addLine(to: CGPoint(x: 183, y: 340))
rectBluePath.addLine(to: CGPoint(x: 166, y: 311))
rectBluePath.addLine(to: CGPoint(x: 196, y: 294))
rectBluePath.addLine(to: CGPoint(x: 213, y: 323))
rectBluePath.addLine(to: CGPoint(x: 183, y: 340))
rectBluePath.addLine(to: CGPoint(x: 213, y: 370))
rectBluePath.addLine(to: CGPoint(x: 231, y: 340))
rectBluePath.addLine(to: CGPoint(x: 213, y: 323))
rectBluePath.addLine(to: CGPoint(x: 243, y: 294))
rectBluePath.addLine(to: CGPoint(x: 260, y: 311))
rectBluePath.addLine(to: CGPoint(x: 231, y: 340))
rectBluePath.addLine(to: CGPoint(x: 260, y: 357))
rectBluePath.addLine(to: CGPoint(x: 260, y: 311))
rectBluePath.addLine(to: CGPoint(x: 272, y: 311))
rectBluePath.addLine(to: CGPoint(x: 283, y: 271))
rectBluePath.addLine(to: CGPoint(x: 306, y: 277))
rectBluePath.addLine(to: CGPoint(x: 296, y: 317))
rectBluePath.addLine(to: CGPoint(x: 272, y: 311))
rectBluePath.addLine(to: CGPoint(x: 272, y: 357))
rectBluePath.addLine(to: CGPoint(x: 296, y: 317))
rectBluePath.addLine(to: CGPoint(x: 307, y: 323))
rectBluePath.addLine(to: CGPoint(x: 283, y: 364))
rectBluePath.addLine(to: CGPoint(x: 324, y: 340))
rectBluePath.addLine(to: CGPoint(x: 307, y: 323))
rectBluePath.addLine(to: CGPoint(x: 336, y: 294))
rectBluePath.addLine(to: CGPoint(x: 306, y: 277))
rectBluePath.addLine(to: CGPoint(x: 324, y: 247))
rectBluePath.addLine(to: CGPoint(x: 353, y: 264))
rectBluePath.addLine(to: CGPoint(x: 336, y: 294))
rectBluePath.addLine(to: CGPoint(x: 353, y: 311))
rectBluePath.addLine(to: CGPoint(x: 377, y: 270))
rectBluePath.addLine(to: CGPoint(x: 353, y: 264))
rectBluePath.addLine(to: CGPoint(x: 365, y: 224))
rectBluePath.addLine(to: CGPoint(x: 388, y: 230))
rectBluePath.addLine(to: CGPoint(x: 388, y: 183))
rectBluePath.addLine(to: CGPoint(x: 365, y: 224))
rectBluePath.addLine(to: CGPoint(x: 353, y: 217))
rectBluePath.addLine(to: CGPoint(x: 324, y: 247))
rectBluePath.addLine(to: CGPoint(x: 307, y: 230))
rectBluePath.addLine(to: CGPoint(x: 336, y: 200))
rectBluePath.addLine(to: CGPoint(x: 353, y: 217))
rectBluePath.addLine(to: CGPoint(x: 377, y: 176))
rectBluePath.addLine(to: CGPoint(x: 353, y: 170))
rectBluePath.addLine(to: CGPoint(x: 336, y: 200))
rectBluePath.addLine(to: CGPoint(x: 307, y: 183))
rectBluePath.addLine(to: CGPoint(x: 324, y: 154))
rectBluePath.addLine(to: CGPoint(x: 353, y: 170))
rectBluePath.addLine(to: CGPoint(x: 365, y: 130))
rectBluePath.addLine(to: CGPoint(x: 330, y: 130))
rectBluePath.addLine(to: CGPoint(x: 324, y: 154))
rectBluePath.addLine(to: CGPoint(x: 283, y: 142))
rectBluePath.addLine(to: CGPoint(x: 290, y: 119))
rectBluePath.addLine(to: CGPoint(x: 330, y: 130))
rectBluePath.addLine(to: CGPoint(x: 330, y: 96))
rectBluePath.addLine(to: CGPoint(x: 290, y: 119))
rectBluePath.addLine(to: CGPoint(x: 283, y: 108))
rectBluePath.addLine(to: CGPoint(x: 243, y: 119))
rectBluePath.addLine(to: CGPoint(x: 237, y: 96))
rectBluePath.addLine(to: CGPoint(x: 277, y: 85))
rectBluePath.addLine(to: CGPoint(x: 283, y: 108))
rectBluePath.addLine(to: CGPoint(x: 324, y: 85))
rectBluePath.addLine(to: CGPoint(x: 277, y: 85))
rectBluePath.addLine(to: CGPoint(x: 277, y: 73))
rectBluePath.addLine(to: CGPoint(x: 324, y: 73))
rectBluePath.addLine(to: CGPoint(x: 284, y: 50))
rectBluePath.addLine(to: CGPoint(x: 277, y: 73))
rectBluePath.addLine(to: CGPoint(x: 237, y: 62))
rectBluePath.addLine(to: CGPoint(x: 243, y: 38))
rectBluePath.addLine(to: CGPoint(x: 196, y: 38))
rectBluePath.close()

接著下方 TOKYO 2020 部份一樣照前面方式繪製出框線後，將這二部份利用路徑結合的方式，使用相同顏色遮罩一起呈現。至於字母 O 及數字 0 中間白色部份就用白色長方形導四邊圓角，再用 addSubview 疊在上層。

//T
let letterTPath = UIBezierPath()
letterTPath.move(to: CGPoint(x: 24, y: 419))
letterTPath.addLine(to: CGPoint(x: 58, y: 419))
letterTPath.addLine(to: CGPoint(x: 58, y: 427))
letterTPath.addLine(to: CGPoint(x: 45, y: 427))
letterTPath.addLine(to: CGPoint(x: 45, y: 472))
letterTPath.addLine(to: CGPoint(x: 37, y: 472))
letterTPath.addLine(to: CGPoint(x: 37, y: 427))
letterTPath.addLine(to: CGPoint(x: 24, y: 427))
letterTPath.close()
//firstOutsideO
let firstOutsideOPath = UIBezierPath(roundedRect: CGRect(x: 68, y: 419, width: 34, height: 54), cornerRadius: 35)
//K
let letterKPath = UIBezierPath()
letterKPath.move(to: CGPoint(x: 118, y: 419))
letterKPath.addLine(to: CGPoint(x: 126, y: 419))
letterKPath.addLine(to: CGPoint(x: 126, y: 443))
letterKPath.addLine(to: CGPoint(x: 143, y: 419))
letterKPath.addLine(to: CGPoint(x: 152, y: 419))
letterKPath.addLine(to: CGPoint(x: 136, y: 443))
letterKPath.addLine(to: CGPoint(x: 154, y: 472))
letterKPath.addLine(to: CGPoint(x: 144, y: 472))
letterKPath.addLine(to: CGPoint(x: 131, y: 449))
letterKPath.addLine(to: CGPoint(x: 126, y: 455))
letterKPath.addLine(to: CGPoint(x: 126, y: 472))
letterKPath.addLine(to: CGPoint(x: 118, y: 472))
letterKPath.close()
//Y
let letterYPath = UIBezierPath()
letterYPath.move(to: CGPoint(x: 161, y: 419))
letterYPath.addLine(to: CGPoint(x: 170, y: 419))
letterYPath.addLine(to: CGPoint(x: 179, y: 440))
letterYPath.addLine(to: CGPoint(x: 189, y: 419))
letterYPath.addLine(to: CGPoint(x: 198, y: 419))
letterYPath.addLine(to: CGPoint(x: 184, y: 449))
letterYPath.addLine(to: CGPoint(x: 184, y: 472))
letterYPath.addLine(to: CGPoint(x: 175, y: 472))
letterYPath.addLine(to: CGPoint(x: 175, y: 449))
letterYPath.close()
//secondOutsideO
let secondOutsideOPath = UIBezierPath(roundedRect: CGRect(x: 204, y: 419, width: 34, height: 54), cornerRadius: 35)
//firstNumberTwo
let aDegree = CGFloat.pi / 180
let firstNumberTwoPath = UIBezierPath(arcCenter: CGPoint(x: 275, y: 435), radius: 15, startAngle: aDegree * 180, endAngle: aDegree * 25, clockwise: true)
firstNumberTwoPath.addLine(to: CGPoint(x: 290, y: 439))
firstNumberTwoPath.addLine(to: CGPoint(x: 270, y: 465))
firstNumberTwoPath.addLine(to: CGPoint(x: 290, y: 465))
firstNumberTwoPath.addLine(to: CGPoint(x: 290, y: 472))
firstNumberTwoPath.addLine(to: CGPoint(x: 261, y: 472))
firstNumberTwoPath.addLine(to: CGPoint(x: 261, y: 465))
firstNumberTwoPath.addLine(to: CGPoint(x: 281, y: 439))
firstNumberTwoPath.addArc(withCenter: CGPoint(x: 275, y: 435), radius: 7, startAngle: aDegree * 25, endAngle: aDegree * 180, clockwise: false)
firstNumberTwoPath.close()
//firstOutsideNumberZero
let firstOutsideNumberZeroPath = UIBezierPath(roundedRect: CGRect(x: 303, y: 419, width: 30, height: 54), cornerRadius: 35)
//secondNumberTwo
let bDegree = CGFloat.pi / 180
let secondNumberTwoPath = UIBezierPath(arcCenter: CGPoint(x: 359, y: 435), radius: 15, startAngle: bDegree * 180, endAngle: bDegree * 25, clockwise: true)
secondNumberTwoPath.addLine(to: CGPoint(x: 374, y: 439))
secondNumberTwoPath.addLine(to: CGPoint(x: 355, y: 465))
secondNumberTwoPath.addLine(to: CGPoint(x: 374, y: 465))
secondNumberTwoPath.addLine(to: CGPoint(x: 374, y: 472))
secondNumberTwoPath.addLine(to: CGPoint(x: 345, y: 472))
secondNumberTwoPath.addLine(to: CGPoint(x: 345, y: 465))
secondNumberTwoPath.addLine(to: CGPoint(x: 365, y: 439))
secondNumberTwoPath.addArc(withCenter: CGPoint(x: 359, y: 435), radius: 7, startAngle: bDegree * 25, endAngle: bDegree * 180, clockwise: false)
secondNumberTwoPath.close()
//secondOutsideNumberZero
let secondOutsideNumberZeroPath = UIBezierPath(roundedRect: CGRect(x: 387, y: 419, width: 30, height: 54), cornerRadius: 35)
//Deep-Blue Area UIBezierPath Combination
rectBluePath.append(letterTPath)
rectBluePath.append(firstOutsideOPath)
rectBluePath.append(letterYPath)
rectBluePath.append(letterKPath)
rectBluePath.append(secondOutsideOPath)
rectBluePath.append(firstNumberTwoPath)
rectBluePath.append(firstOutsideNumberZeroPath)
rectBluePath.append(secondNumberTwoPath)
rectBluePath.append(secondOutsideNumberZeroPath)
let blueShapeLayer = CAShapeLayer()
blueShapeLayer.path = rectBluePath.cgPath
let blueView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
blueView.backgroundColor = UIColor(red: 0, green: 0.137, blue: 0.38, alpha: 1)
blueView.layer.mask = blueShapeLayer
//white area
//firstInsideO
let firstInsideOPath = UIBezierPath(roundedRect: CGRect(x: 76, y: 427, width: 18, height: 39), cornerRadius: 35)
//secondInsideO
let secondInsideOPath = UIBezierPath(roundedRect: CGRect(x: 212, y: 427, width: 18, height: 39), cornerRadius: 35)
//firstInsideNumberZero
let firstInsideNumberZeroPath = UIBezierPath(roundedRect: CGRect(x: 311, y: 427, width: 14, height: 38), cornerRadius: 35)
//secondInsideNumberZero
let secondInsideNumberZeroPath = UIBezierPath(roundedRect: CGRect(x: 395, y: 427, width: 14, height: 38), cornerRadius: 35)
//White Area UIBezierPath Combination
firstInsideOPath.append(secondInsideOPath)
firstInsideOPath.append(firstInsideNumberZeroPath)
firstInsideOPath.append(secondInsideNumberZeroPath)
let whiteShapeLayer = CAShapeLayer()
whiteShapeLayer.path = firstInsideOPath.cgPath
let whiteView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
whiteView.backgroundColor = UIColor.white
whiteView.layer.mask = whiteShapeLayer

最後 5 色圈圈部份殺死了我腦細胞不知有多少，一直鬼打牆卡在順時針／逆時針、角度怎麼算，數學真的好難懂！釐清之後好不容易畫出 5 個圈，又有重疊顏色的問題，天吶！設計人員只要會用 PHOTOSHOP 就可以飛快的拉出想要的圓，突然覺得工程師很辛苦。搞到最後大腦負荷程度嚴重超載，只好選擇使用相同顏色色塊重疊在要調整的地方 ⋯⋯

//Five Rings AREA
//blue ring
let blueRingDegree = CGFloat.pi / 180
let blueRingPath = UIBezierPath(arcCenter: CGPoint(x: 130, y: 542), radius: 42, startAngle: blueRingDegree * 80, endAngle: blueRingDegree * 78, clockwise: true)
blueRingPath.addLine(to: CGPoint(x: 138, y: 576))
blueRingPath.addArc(withCenter: CGPoint(x: 130, y: 542), radius: 35, startAngle: blueRingDegree * 78, endAngle: blueRingDegree * 80, clockwise: false)
blueRingPath.close()
let blueRingShapeLayer = CAShapeLayer()
blueRingShapeLayer.path = blueRingPath.cgPath
let blueRingView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
blueRingView.backgroundColor = UIColor(red: 0.227, green: 0.490, blue: 0.796, alpha: 1)
blueRingView.layer.mask = blueRingShapeLayer
//yellow ring
let yellowRingDegree = CGFloat.pi / 180
let yellowRingPath = UIBezierPath(arcCenter: CGPoint(x: 174, y: 582), radius: 42, startAngle: yellowRingDegree * 0, endAngle: yellowRingDegree * 355, clockwise: true)
yellowRingPath.addLine(to: CGPoint(x: 209, y: 580))
yellowRingPath.addArc(withCenter: CGPoint(x: 174, y: 582), radius: 35, startAngle: yellowRingDegree * 355, endAngle: yellowRingDegree * 0, clockwise: false)
yellowRingPath.close()
let yellowRingShapeLayer = CAShapeLayer()
yellowRingShapeLayer.path = yellowRingPath.cgPath
let yellowRingView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
yellowRingView.backgroundColor = UIColor(red: 0.969, green: 0.663, blue: 0.227, alpha: 1)
yellowRingView.layer.mask = yellowRingShapeLayer
//black ring
let blackRingDegree = CGFloat.pi / 180
let blackRingPath = UIBezierPath(arcCenter: CGPoint(x: 219, y: 544), radius: 42, startAngle: blackRingDegree * 80, endAngle: blackRingDegree * 78, clockwise: true)
blackRingPath.addLine(to: CGPoint(x: 228, y: 576))
blackRingPath.addArc(withCenter: CGPoint(x: 219, y: 544), radius: 35, startAngle: blackRingDegree * 78, endAngle: blackRingDegree * 80, clockwise: false)
blackRingPath.close()
let blackRingShapeLayer = CAShapeLayer()
blackRingShapeLayer.path = blackRingPath.cgPath
let blackRingView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
blackRingView.backgroundColor = UIColor.black
blackRingView.layer.mask = blackRingShapeLayer
//green ring
let greenRingDegree = CGFloat.pi / 180
let greenRingPath = UIBezierPath(arcCenter: CGPoint(x: 264, y: 582), radius: 42, startAngle: greenRingDegree * 0, endAngle: greenRingDegree * 355, clockwise: true)
greenRingPath.addLine(to: CGPoint(x: 300, y: 580))
greenRingPath.addArc(withCenter: CGPoint(x: 264, y: 582), radius: 35, startAngle: greenRingDegree * 355, endAngle: greenRingDegree * 0, clockwise: false)
greenRingPath.close()
let greenRingShapeLayer = CAShapeLayer()
greenRingShapeLayer.path = greenRingPath.cgPath
let greenRingView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
greenRingView.backgroundColor = UIColor(red: 0.184, green: 0.659, blue: 0.349, alpha: 1)
greenRingView.layer.mask = greenRingShapeLayer
//red ring
let redRingDegree = CGFloat.pi / 180
let redRingPath = UIBezierPath(arcCenter: CGPoint(x: 309, y: 542), radius: 42, startAngle: redRingDegree * 182, endAngle: redRingDegree * 177, clockwise: true)
redRingPath.addLine(to: CGPoint(x: 276, y: 543))
redRingPath.addArc(withCenter: CGPoint(x: 309, y: 542), radius: 35, startAngle: redRingDegree * 177, endAngle: redRingDegree * 182, clockwise: false)
redRingPath.close()
let redRingShapeLayer = CAShapeLayer()
redRingShapeLayer.path = redRingPath.cgPath
let redRingView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
redRingView.backgroundColor = UIColor(red: 0.898, green: 0.102, blue: 0.278, alpha: 1)
redRingView.layer.mask = redRingShapeLayer
//Five Rings Cover AREA
//blue ring cover
let blueRingCoverDegree = CGFloat.pi / 180
let blueRingCoverPath = UIBezierPath(arcCenter: CGPoint(x: 130, y: 542), radius: 42, startAngle: blueRingCoverDegree * 340, endAngle: blueRingCoverDegree * 20, clockwise: true)
blueRingCoverPath.addLine(to: CGPoint(x: 162, y: 555))
blueRingCoverPath.addArc(withCenter: CGPoint(x: 130, y: 542), radius: 35, startAngle: blueRingCoverDegree * 20, endAngle: blueRingCoverDegree * 340, clockwise: false)
blueRingCoverPath.close()
let blueRingCoverShapeLayer = CAShapeLayer()
blueRingCoverShapeLayer.path = blueRingCoverPath.cgPath
let blueRingCoverView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
blueRingCoverView.backgroundColor = UIColor(red: 0.227, green: 0.490, blue: 0.796, alpha: 1)
blueRingCoverView.layer.mask = blueRingCoverShapeLayer
//yellow ring cover
let yellowRingCoverDegree = CGFloat.pi / 180
let yellowRingCoverPath = UIBezierPath(arcCenter: CGPoint(x: 174, y: 582), radius: 42, startAngle: yellowRingCoverDegree * 270, endAngle: yellowRingCoverDegree * 300, clockwise: true)
yellowRingCoverPath.addLine(to: CGPoint(x: 191, y: 550))
yellowRingCoverPath.addArc(withCenter: CGPoint(x: 174, y: 582), radius: 35, startAngle: yellowRingCoverDegree * 300, endAngle: yellowRingCoverDegree * 270, clockwise: false)
yellowRingCoverPath.close()
let yellowRingCoverShapeLayer = CAShapeLayer()
yellowRingCoverShapeLayer.path = yellowRingCoverPath.cgPath
let yellowRingCoverView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
yellowRingCoverView.backgroundColor = UIColor(red: 0.969, green: 0.663, blue: 0.227, alpha: 1)
yellowRingCoverView.layer.mask = yellowRingCoverShapeLayer
//black ring cover
let blackRingCoverDegree = CGFloat.pi / 180
let blackRingCoverPath = UIBezierPath(arcCenter: CGPoint(x: 219, y: 544), radius: 42, startAngle: blackRingCoverDegree * 350, endAngle: blackRingCoverDegree * 20, clockwise: true)
blackRingCoverPath.addLine(to: CGPoint(x: 252, y: 556))
blackRingCoverPath.addArc(withCenter: CGPoint(x: 219, y: 544), radius: 35, startAngle: blackRingCoverDegree * 20, endAngle: blackRingCoverDegree * 350, clockwise: false)
blackRingCoverPath.close()
let blackRingCoverShapeLayer = CAShapeLayer()
blackRingCoverShapeLayer.path = blackRingCoverPath.cgPath
let blackRingCoverView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
blackRingCoverView.backgroundColor = UIColor.black
blackRingCoverView.layer.mask = blackRingCoverShapeLayer
//green ring cover
let greenRingCoverDegree = CGFloat.pi / 180
let greenRingCoverPath = UIBezierPath(arcCenter: CGPoint(x: 264, y: 582), radius: 42, startAngle: greenRingCoverDegree * 270, endAngle: greenRingCoverDegree * 300, clockwise: true)
greenRingCoverPath.addLine(to: CGPoint(x: 281, y: 550))
greenRingCoverPath.addArc(withCenter: CGPoint(x: 264, y: 582), radius: 35, startAngle: greenRingCoverDegree * 300, endAngle: greenRingCoverDegree * 270, clockwise: false)
greenRingCoverPath.close()
let greenRingCoverShapeLayer = CAShapeLayer()
greenRingCoverShapeLayer.path = greenRingCoverPath.cgPath
let greenRingCoverView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
greenRingCoverView.backgroundColor = UIColor(red: 0.184, green: 0.659, blue: 0.349, alpha: 1)
greenRingCoverView.layer.mask = greenRingCoverShapeLayer
//red ring cover
let redRingCoverDegree = CGFloat.pi / 180
let redRingCoverPath = UIBezierPath(arcCenter: CGPoint(x: 309, y: 542), radius: 42, startAngle: redRingCoverDegree * 90, endAngle: redRingCoverDegree * 120, clockwise: true)
redRingCoverPath.addLine(to: CGPoint(x: 293, y: 572))
redRingCoverPath.addArc(withCenter: CGPoint(x: 309, y: 542), radius: 35, startAngle: redRingCoverDegree * 120, endAngle: redRingCoverDegree * 90, clockwise: false)
redRingCoverPath.close()
let redRingCoverShapeLayer = CAShapeLayer()
redRingCoverShapeLayer.path = redRingCoverPath.cgPath
let redRingCoverView = UIView(frame: CGRect(x: 0, y: 0, width: 440, height: 648))
redRingCoverView.backgroundColor = UIColor(red: 0.898, green: 0.102, blue: 0.278, alpha: 1)
redRingCoverView.layer.mask = redRingCoverShapeLayer

第一次完全用程式做出完整的圖案，花了 2.5 天時間，終身難忘。