#43 從程式製作國旗圖案：德國、瑞典、捷克

Germany, Sweden and Czech Republic

做什麼事情循序漸進準沒錯！這次作業我從簡單只有三個色塊的德國國旗開始，依照彼得潘的教學範例依樣畫葫蘆修改就沒問題～接著練習色塊有不同大小的瑞典國旗，其實只要座標和長寬大小抓對也是非常輕鬆可以完成的一款國旗！德國和瑞典的部分大約90分鐘就完成了，但最後一個捷克國旗真的是大魔王啊…卡了一天？

先來看看我的程式碼吧！

德國國旗
我的寫法是先拉一個國旗框架，再宣告三個不同色塊加上去。但現在寫文章review程式碼時想到，其實也可以直接讓國旗框架的顏色是其中一個，只要再宣告兩個色塊加上去就好了～

//宣告德國國旗框架
var germany = CGRect(x:0, y:0, width:200, height:135)
let germanyBackgroundView = UIView(frame:germany)
germanyBackgroundView.backgroundColor = UIColor(red:0, green:0, blue:0, alpha:0)
//黑色塊
var germanyBlack = CGRect(x:0, y:0, width:200, height:45)
let blackBackgroundView = UIView(frame:germanyBlack)
blackBackgroundView.backgroundColor = UIColor(red:0/255, green:0/255, blue:0/255, alpha:1)
//紅色塊
var germanyRed = CGRect(x:0, y:(germanyBackgroundView.frame.height)/3, width:200, height:45)
let redBackgroundView = UIView(frame:germanyRed)
redBackgroundView.backgroundColor = UIColor(red:255/255, green:0/255, blue:0/255, alpha:1)
//金色塊
var germanyGold = CGRect(x:0, y:(germanyBackgroundView.frame.height)/3*2, width:200, height:45)
let goldBackgroundView = UIView(frame:germanyGold)
goldBackgroundView.backgroundColor = UIColor(red:238/255, green:204/255, blue:0/255, alpha:1)
//把三個色塊加到國旗框架上
germanyBackgroundView.addSubview(blackBackgroundView)
germanyBackgroundView.addSubview(redBackgroundView)
germanyBackgroundView.addSubview(goldBackgroundView)
//德國國旗完成
germanyBackgroundView

瑞典國旗
寫法一樣是先拉一個黃色底的國旗框架，再宣告四個不同大小的藍色色塊加上去。但其實也可以相反地先宣告藍色底的國旗框架，再用黃色色塊去拼出中間的十字形，這樣只要再兩個色塊就能完成唷！

//宣告瑞典國旗框架
var sweden = CGRect(x:0, y:0, width:200, height:135)
let swedenBackgroundView = UIView(frame:sweden)
swedenBackgroundView.backgroundColor = UIColor(red:254/255, green:204/255, blue:2/255, alpha:1)
//左上色塊
var leftUp = CGRect(x:0, y:0, width:65, height:54)
let leftUpBackgroundView = UIView(frame:leftUp)
leftUpBackgroundView.backgroundColor = UIColor(red:0/255, green:106/255, blue:167/255, alpha:1)
//左下色塊
var leftDown = CGRect(x:0, y:(swedenBackgroundView.frame.height)/5*3, width:65, height:54)
let leftDownBackgroundView = UIView(frame:leftDown)
leftDownBackgroundView.backgroundColor = UIColor(red:0/255, green:106/255, blue:167/255, alpha:1)
//右上色塊
var rightUp = CGRect(x:(swedenBackgroundView.frame.width)-108, y:0, width:162, height:54)
let rightUpBackgroundView = UIView(frame:rightUp)
rightUpBackgroundView.backgroundColor = UIColor(red:0/255, green:106/255, blue:167/255, alpha:1)
//右下色塊
var rightDown = CGRect(x:(swedenBackgroundView.frame.width)-108, y:(swedenBackgroundView.frame.height)/5*3, width:162, height:54)
let rightDownBackgroundView = UIView(frame:rightDown)
rightDownBackgroundView.backgroundColor = UIColor(red:0/255, green:106/255, blue:167/255, alpha:1)
//把四個色塊加到國旗框架上
swedenBackgroundView.addSubview(leftUpBackgroundView)
swedenBackgroundView.addSubview(leftDownBackgroundView)
swedenBackgroundView.addSubview(rightUpBackgroundView)
swedenBackgroundView.addSubview(rightDownBackgroundView)
//瑞典國旗完成
swedenBackgroundView

捷克國旗//正確版
我的寫法是先拉一個國旗框架，再宣告三個色塊加上去，看起來是不是很簡單？以下先分享正確版可以run出國旗的程式碼，最底再分享我卡關一天的程式碼…

//宣告捷克國旗框架
var czech = CGRect(x:0, y:0, width:200, height:135)
let czechBackgroundView = UIView(frame:czech)
czechBackgroundView.backgroundColor = UIColor(red:0, green:0, blue:0, alpha:1)
//白色塊
var czechWhite = CGRect(x:0, y:0, width:200, height:67.5)
let whiteBackgroundView = UIView(frame:czechWhite)
whiteBackgroundView.backgroundColor = UIColor(red:1, green:1, blue:1, alpha:1)
//紅色塊
var czechRed = CGRect(x:0, y:(czechBackgroundView.frame.height)/2, width:200, height:67.5)
let credBackgroundView = UIView(frame:czechRed)
credBackgroundView.backgroundColor = UIColor(red:215/255, green:19/255, blue:25/255, alpha:1)
//藍色三角形
var czechBlue = CGRect(x:0, y:0, width:100, height:135)
let blueBackgroundView = UIView(frame:czechBlue)
blueBackgroundView.backgroundColor = UIColor(red:18/255, green:69/255, blue:126/255, alpha:1)
let bluePath = UIBezierPath()
var point = CGPoint(x:0, y:0)
bluePath.move(to:point)
point = CGPoint(x:100, y:67.5)
bluePath.addLine(to: point)
point = CGPoint(x:0, y:135)
bluePath.addLine(to:point)
bluePath.close()
let blueLayer = CAShapeLayer()
blueLayer.path = bluePath.cgPath
blueBackgroundView.layer.mask = blueLayer
blueBackgroundView
//把三個色塊加到國旗框架上
czechBackgroundView.addSubview(whiteBackgroundView)
czechBackgroundView.addSubview(credBackgroundView)
czechBackgroundView.addSubview(blueBackgroundView)
//捷克國旗完成
czechBackgroundView

捷克國旗//失敗版
這個寫法一樣是先拉一個國旗框架，但在色塊切割上我一開始的想法是，白色塊加上半部藍色三角形，紅色塊上加下半部藍色三角形，最後再把白、紅色塊加到國旗框架上。白色塊上加三角形按照彼得潘的文章練習非常順利，但紅色塊上加三角形就發生了讓我卡關一天的座標問題，然後開始懷疑自己為什麼要這樣寫XD

//白色塊
var czechWhite = CGRect(x:0, y:0, width:200, height:67.5)
let whiteBackgroundView = UIView(frame:czechWhite)
whiteBackgroundView.backgroundColor = UIColor(red:1, green:1, blue:1, alpha:1)
//白色塊上的藍色三角形
let czechBlueUp = CGRect(x:0, y:0, width:100, height:67.5)
let blueUpBackgroundView = UIView(frame:czechBlueUp)
blueUpBackgroundView.backgroundColor = UIColor(red:18/255, green:69/255, blue:126/255, alpha:1)
let blueUpPath = UIBezierPath()
var upPoint = CGPoint(x:0, y:0)
blueUpPath.move(to:upPoint)
upPoint = CGPoint(x:0, y:67.5)
blueUpPath.addLine(to: upPoint)
upPoint = CGPoint(x:100, y:67.5)
blueUpPath.addLine(to:upPoint)
blueUpPath.close()
let blueUpLayer = CAShapeLayer()
blueUpLayer.path = blueUpPath.cgPath
blueUpBackgroundView.layer.mask = blueUpLayer
whiteBackgroundView.addSubview(blueUpBackgroundView)

//紅色塊
var czechRed = CGRect(x:0, y:(czechBackgroundView.frame.height)/2, width:200, height:67.5)
let credBackgroundView = UIView(frame:czechRed)
credBackgroundView.backgroundColor = UIColor(red:215/255, green:19/255, blue:25/255, alpha:1)
//紅色塊上的藍色三角形
let czechBlueDown = CGRect(x:0, y:(czechBackgroundView.frame.height)/2, width:100, height:67.5)
let blueDownBackgroundView = UIView(frame:czechBlueDown)
blueDownBackgroundView.backgroundColor = UIColor(red:18/255, green:69/255, blue:126/255, alpha:1)
let blueDownPath = UIBezierPath()
var downPoint = CGPoint(x:0, y:67.5)
blueDownPath.move(to:downPoint)
downPoint = CGPoint(x:100, y:67.5)
blueDownPath.addLine(to: downPoint)
downPoint = CGPoint(x:0, y:135)
blueDownPath.addLine(to:downPoint)
blueDownPath.close()
let blueDownLayer = CAShapeLayer()
blueDownLayer.path = blueDownPath.cgPath
blueDownBackgroundView.layer.mask = blueDownLayer
credBackgroundView.addSubview(blueDownBackgroundView)

奇怪？明明跟白色塊一樣的寫法，為什麼紅色塊就跑不出三角形呢？原來是UIBezierPath()的預設是(0,0)，如果用我原來的寫法，在czechBlueDown的時候設定的位置是(0,(czechBackgroundView.frame.height)/2)，y座標的範圍已經超過0了，所以我畫的三角形其實在宣告的畫面之外，一起來看看修改後的更正版！

//紅色塊
var czechRed = CGRect(x:0, y:0, width:200, height:67.5)
let credBackgroundView = UIView(frame:czechRed)
credBackgroundView.backgroundColor = UIColor(red:215/255, green:19/255, blue:25/255, alpha:1)
//紅色塊上的藍色三角形
let czechBlueDown = CGRect(x:0, y:0, width:100, height:67.5)
let blueDownBackgroundView = UIView(frame:czechBlueDown)
blueDownBackgroundView.backgroundColor = UIColor(red:18/255, green:69/255, blue:126/255, alpha:1)
let blueDownPath = UIBezierPath()
var downPoint = CGPoint(x:0, y:0)
blueDownPath.move(to:downPoint)
downPoint = CGPoint(x:100, y:0)
blueDownPath.addLine(to: downPoint)
downPoint = CGPoint(x:0, y:67.5)
blueDownPath.addLine(to:downPoint)
blueDownPath.close()
let blueDownLayer = CAShapeLayer()
blueDownLayer.path = blueDownPath.cgPath
blueDownBackgroundView.layer.mask = blueDownLayer
credBackgroundView.addSubview(blueDownBackgroundView)

但你以為這樣就成功了嗎？錯！現在雖然可以在紅色塊上顯示三角形，但若加到國旗框架上會變成這樣…原本以為柳暗花明又一村，沒想到good time總是飛得太快QQ到底哪裡有問題～～～

credBackgroundView.frame = CGRect(x:0, y:czechBackgroundView.frame.height/2, width:200, height:67.5)

就是這一句！讓我的捷克國旗起死回生！因為紅色塊的部分改寫成由(0,0)開始，就跟白色塊變成了一模一樣的位置，所以必須改變紅色塊的位置，才不會發生覆蓋的問題。完成～