Swift程式碼繪製瑞典＆以色列國旗｜Ted

量國旗尺寸網站：https://www.geogebra.org
國旗顏色網站：https://www.schemecolor.com
將 view 變成任意形狀的三種方法
旋轉view的方法

先從比較簡單的瑞典國旗開始練練手：

利用mask：底圖＋直條＋橫條 ＝成功！

瑞典國旗有點簡單，想虐一下自己，

想到這週公投剛結束，台灣人還是無法以中華民國正名在國際上的地位。
猶太人在歷史上經歷了各種苦難滅國大屠殺流離失所，再重新建立起以色列，乾脆來做以色列國旗。

一開始底圖＋上下兩橫條：

import UIKit
//底圖
var rect = CGRect(x: 0, y: 0, width: 300, height: 200)
let backgroundview = UIView(frame: rect)
backgroundview.backgroundColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1)
//生成上下兩塊長方形
let bluerecttop = CGRect(x: 0, y: 0.135, width: 300, height: 32.5)
let bluerecttopview = UIView(frame: bluerecttop)
bluerecttopview.backgroundColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1)
let bluerectbottom = CGRect(x: 0, y: 1.52, width: 300, height: 32.5)
let bluerectbottomview = UIView(frame: bluerectbottom)
bluerectbottomview.backgroundColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1)
//將長方形加入底圖
backgroundview.addSubview(bluerecttopview)
backgroundview.addSubview(bluerectbottomview)
backgroundview

中間大魔王六芒星的部分：

可以看成很多種圖案堆疊：一個六芒星(藍)＋小三角形(白)＋正六邊形(白)等等。

這個連結有一些用線條畫三角形的方法(但我看不懂)
call out Peter求解，將View變成任何形狀的方法。

固執如我就想先用最陽春的寫法，練基礎(利用mask)

//畫六芒星
let starofdavidpath = UIBezierPath()
var starpoint = CGPoint(x: 150, y: 50)
starofdavidpath.move(to: starpoint)
starofdavidpath.addLine(to: CGPoint(x: 136, y: 74))
starofdavidpath.addLine(to: CGPoint(x: 107, y: 74))
starofdavidpath.addLine(to: CGPoint(x: 120, y: 100))
starofdavidpath.addLine(to: CGPoint(x: 107 , y: 124))
starofdavidpath.addLine(to: CGPoint(x: 136, y: 124))
starofdavidpath.addLine(to: CGPoint(x: 150, y: 150))
starofdavidpath.addLine(to: CGPoint(x: 165, y: 124))
starofdavidpath.addLine(to: CGPoint(x: 193, y: 124))
starofdavidpath.addLine(to: CGPoint(x: 180, y: 100))
starofdavidpath.addLine(to: CGPoint(x: 193, y: 74))
starofdavidpath.addLine(to: CGPoint(x: 165, y: 74))
starofdavidpath.close()
//產生一個starofdavidframe放六芒星
let starofdavidframe = CGRect(x: 0, y: 0, width: 1000, height: 1000)
let starofdavidview = UIView(frame: starofdavidframe)
starofdavidview.backgroundColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1)
//插入backgoundview
let starShapeLayer = CAShapeLayer()
starShapeLayer.path = starofdavidpath.cgPath
starofdavidview.layer.mask = starShapeLayer
starofdavidview
backgroundview.addSubview(starofdavidview)
//生成六邊形
let hexagonpath = UIBezierPath()
var hexagonpoint = CGPoint(x: 140, y: 117)
hexagonpath.move(to: hexagonpoint)
hexagonpath.addLine(to: CGPoint(x: 130, y: 100 ))
hexagonpath.addLine(to: CGPoint(x: 140, y: 82))
hexagonpath.addLine(to: CGPoint(x: 160, y: 82))
hexagonpath.addLine(to: CGPoint(x: 170, y: 100))
hexagonpath.addLine(to: CGPoint(x: 160, y: 117))
hexagonpath.close()
//產生一個hexagonframe放六芒星
let hexagonframe = CGRect(x: 0, y: 0, width: 1000, height: 1000)
let hexagonview = UIView(frame: hexagonframe)
hexagonview.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
//插入backgoundview
let hexagonshapelayer = CAShapeLayer()
hexagonshapelayer.path = hexagonpath.cgPath
hexagonview.layer.mask = hexagonshapelayer
hexagonview
backgroundview.addSubview(hexagonview)
//第1個三角型
let trianglepath = UIBezierPath()
var trianglepoint = CGPoint(x: 150, y: 134)
trianglepath.move(to: trianglepoint)
trianglepath.addLine(to: CGPoint(x: 145, y: 124))
trianglepath.addLine(to: CGPoint(x: 155, y: 124))
trianglepath.close()
//
let triangleframe = CGRect(x: 0, y: 0, width: 1000, height: 1000)
let triangleview = UIView(frame: triangleframe)
triangleview.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let triangleshapelayer = CAShapeLayer()
triangleshapelayer.path = trianglepath.cgPath
triangleview.layer.mask = triangleshapelayer
triangleview
backgroundview.addSubview(triangleview)
//第2個三角型
let triangle2path = UIBezierPath()
var triangle2point = CGPoint(x: 126, y: 92)
triangle2path.move(to: triangle2point)
triangle2path.addLine(to: CGPoint(x: 131, y: 82))
triangle2path.addLine(to: CGPoint(x: 121, y: 82))
triangle2path.close()
//
let triangle2frame = CGRect(x: 0, y: 0, width: 1000, height: 1000)
let triangle2view = UIView(frame: triangle2frame)
triangle2view.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let triangle2shapelayer = CAShapeLayer()
triangle2shapelayer.path = triangle2path.cgPath
triangle2view.layer.mask = triangle2shapelayer
triangle2view
backgroundview.addSubview(triangle2view)
//第3個三角型
let triangle3path = UIBezierPath()
var triangle3point = CGPoint(x: 174, y: 92)
triangle3path.move(to: triangle3point)
triangle3path.addLine(to: CGPoint(x: 179, y: 82))
triangle3path.addLine(to: CGPoint(x: 169, y: 82))
triangle3path.close()
//
let triangle3frame = CGRect(x: 0, y: 0, width: 1000, height: 1000)
let triangle3view = UIView(frame: triangle3frame)
triangle3view.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let triangle3shapelayer = CAShapeLayer()
triangle3shapelayer.path = triangle3path.cgPath
triangle3view.layer.mask = triangle3shapelayer
triangle3view
backgroundview.addSubview(triangle3view)
//第4個三角型
let triangle4path = UIBezierPath()
var triangle4point = CGPoint(x: 150, y: 65)
triangle4path.move(to: triangle4point)
triangle4path.addLine(to: CGPoint(x: 145, y: 74))
triangle4path.addLine(to: CGPoint(x: 155, y: 74))
triangle4path.close()
//
let triangle4frame = CGRect(x: 0, y: 0, width: 1000, height: 1000)
let triangle4view = UIView(frame: triangle4frame)
triangle4view.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let triangle4shapelayer = CAShapeLayer()
triangle4shapelayer.path = triangle4path.cgPath
triangle4view.layer.mask = triangle4shapelayer
triangle4view
backgroundview.addSubview(triangle4view)
//第5個三角型
let triangle5path = UIBezierPath()
var triangle5point = CGPoint(x: 126, y: 108)
triangle5path.move(to: triangle5point)
triangle5path.addLine(to: CGPoint(x: 121, y: 118))
triangle5path.addLine(to: CGPoint(x: 131, y: 118))
triangle5path.close()
//
let triangle5frame = CGRect(x: 0, y: 0, width: 1000, height: 1000)
let triangle5view = UIView(frame: triangle5frame)
triangle5view.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let triangle5shapelayer = CAShapeLayer()
triangle5shapelayer.path = triangle5path.cgPath
triangle5view.layer.mask = triangle5shapelayer
triangle5view
backgroundview.addSubview(triangle5view)
//第6個三角型
let triangle6path = UIBezierPath()
var triangle6point = CGPoint(x: 174, y: 108)
triangle6path.move(to: triangle6point)
triangle6path.addLine(to: CGPoint(x: 179, y: 118))
triangle6path.addLine(to: CGPoint(x: 169, y: 118))
triangle6path.close()

成功啦！！！

主要是練習，就耐著性子一個一個來：
畫1個六芒星(藍色)＋1個六邊形(白)＋6個三角形(白)。

相對座標拿紙筆稍微計算一下，順便複習一下數學。

每一行都先加入底圖偷看一下，確保沒問題。

花了超過8小時學習＋“寫”出這張圖，有種莫名感動再看一次。

經過Peter開導，加入第2種繪製六芒星的方法：
利用addsublayer畫出2個三角形堆疊。

import UIKit
//底圖
let rect = CGRect(x: 0, y: 0, width: 300, height: 200)
let backgroundview = UIView(frame: rect)
backgroundview.backgroundColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1)
//生成上下兩塊長方形
let bluerecttop = CGRect(x: 0, y: 10, width: 300, height: 25)
let bluerecttopview = UIView(frame: bluerecttop)
bluerecttopview.backgroundColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1)
let bluerectbottom = CGRect(x: 0, y: 165, width: 300, height: 25)
let bluerectbottomview = UIView(frame: bluerectbottom)
bluerectbottomview.backgroundColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1)
backgroundview.addSubview(bluerecttopview)
backgroundview.addSubview(bluerectbottomview)
backgroundview
//用addsublayer繪製六芒星
var path = UIBezierPath()
path.move(to: CGPoint(x: 150, y: 50))
path.addLine(to: CGPoint(x: 107, y: 124))
path.addLine(to: CGPoint(x: 193, y: 124))
path.close()
var triangleLayer = CAShapeLayer()
triangleLayer.path = path.cgPath
triangleLayer.strokeColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1).cgColor
triangleLayer.lineWidth = 10
triangleLayer.fillColor = UIColor.clear.cgColor
backgroundview.layer.addSublayer(triangleLayer)
backgroundview
path = UIBezierPath()
path.move(to: CGPoint(x: 107, y: 74))
path.addLine(to: CGPoint(x: 150, y: 150))
path.addLine(to: CGPoint(x: 193, y: 74))
path.close()
triangleLayer = CAShapeLayer()
triangleLayer.path = path.cgPath
triangleLayer.strokeColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1).cgColor
triangleLayer.lineWidth = 10
triangleLayer.fillColor = UIColor.clear.cgColor
backgroundview.layer.addSublayer(triangleLayer)
backgroundview

相較第一種利用mask，第二種直接用CAShapelayer的function addsublayer，將修飾好的view用addsublayer的形式加入原本的底圖，

其他function有strokeColor 設定邊框的顏色，lineWidth 設定邊框的寬度。

另外也將var的用法熟悉，精簡寫法，不用多一個一樣的view就改一次名。