[study#6-2] 從程式製作國旗圖案-蒙古國國旗
Published in
5 min readNov 30, 2018
總是想要挑戰有一點難度的，這次用程式製作國旗就選了蒙古國旗。
據說可以把view變成任意形狀，鬼畫符也可以，在堅持毅力下還真的把「火的形狀」畫出來了！
次難的是太極跟彎月的形狀，不過這在其他篇也可以看到寫程式的方法，以下就說明火的形狀吧
//先設定view的大小及顏色
let fireView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 650))fireView.backgroundColor = UIColor(displayP3Red: 1, green: 217/255, blue: 0, alpha: 1)//開始繪製形狀
let firePath = UIBezierPath()firePath.move(to: CGPoint(x: 151, y: 71))firePath.addQuadCurve(to: CGPoint(x: 148, y: 95), controlPoint: CGPoint(x: 152, y: 85))firePath.addQuadCurve(to: CGPoint(x: 166, y: 115), controlPoint: CGPoint(x: 151, y: 116))firePath.addQuadCurve(to: CGPoint(x: 172, y: 115), controlPoint: CGPoint(x: 166, y: 115))firePath.addQuadCurve(to: CGPoint(x: 185, y: 88), controlPoint: CGPoint(x: 193, y: 110))firePath.addCurve(to: CGPoint(x: 181, y: 73), controlPoint1: CGPoint(x: 179, y: 83), controlPoint2: CGPoint(x: 187, y: 75))firePath.addCurve(to: CGPoint(x: 180, y: 90),controlPoint1: CGPoint(x: 182, y: 75) ,controlPoint2: CGPoint(x: 174, y: 82))firePath.addQuadCurve(to: CGPoint(x: 171, y: 91), controlPoint: CGPoint(x: 177, y: 100))firePath.addLine(to: CGPoint(x: 171, y: 85))firePath.addQuadCurve(to: CGPoint(x: 167, y: 60), controlPoint: CGPoint(x: 180, y: 79))firePath.addCurve(to: CGPoint(x: 165, y: 89), controlPoint1: CGPoint(x: 172, y: 72), controlPoint2: CGPoint(x: 154, y: 74))firePath.addQuadCurve(to: CGPoint(x: 155, y: 93), controlPoint: CGPoint(x: 162, y: 102))firePath.addCurve(to: CGPoint(x: 152, y: 70), controlPoint1: CGPoint(x: 162, y: 83), controlPoint2: CGPoint(x: 148, y: 75))firePath.close()
//形狀繪製完畢//將view及形狀遮罩結合
let fireShape = CAShapeLayer()fireShape.path = firePath.cgPathfireView.layer.mask = fireShape//查看完成的畫面
fireView
move(to: CGPoint)是設置起始點的位置，之後每一個 to 是每次畫線的終點，也是下次畫線的起點。controlpoint是用來垃曲線。
addLine畫直線；addQuadCurve只有一個控制點；addCurve有兩個控制點.
使用別人的程式來調整並觀看結果方便從中瞭解各項功能：
選定自己想畫的圖形後，就一步一步的畫線。各條線的距離弧度等，在沒有精算數據的情況下，就是用肉眼憑感覺調整各controlpoint的位置，所以最後畫出來的圖並沒有跟目標一模一樣，只是以特殊形狀來說，自己覺得真的有練習到跟了解特定指令的用法了：
完整的程式碼如下：
本來想試著讓程式碼比較精簡，不過還是只能很亂，只能先求完成畫面目標，以後才會學更進階的吧！
