[ios APP] 作業 — 用程式畫國旗

彼得潘出了一個畫國旗的作業
剛好我以前用python寫過台灣的國旗，於是想說就用ios 來改寫看看吧
先看看python版本，用了turtle函式庫，是一個用畫筆繪圖的函式庫

import turtle #引進turtle函式庫
turtle.speed(10)  #設定畫筆速度
#定義畫長方形的方法
def rectangle(x,y,leng,wid,color):    
  #定義"rectangle"函式有五個變數輸入，xy是起點座標，leng跟wid是長跟寬，
  #color是顏色
  turtle.color(color)     #設定顏色為參數傳入的顏色
  turtle.penup()          #畫筆拿起來
  turtle.goto(x,y)        #移動到起點位置x,y
  turtle.down()           #下筆開始畫
  turtle.begin_fill()     #開始填滿
  turtle.forward(leng)    #前進leng的長度
  turtle.right(90)        #右轉90度
  turtle.forward(wid)     #前進wid的長度
  turtle.right(90)        #右轉90度
  turtle.forward(leng)    #前進leng的長度
  turtle.right(90)        #右轉90度
  turtle.forward(wid)     #前進wid的長度
  turtle.right(90)        #右轉90度
  turtle.end_fill()       #結束填滿
rectangle(-200,200,600,400,'red')   
#從(-200,200)開始畫一個長600寬400，紅色的長方形
rectangle(-200,200,300,200,'blue')  
#從(-200,200)開始畫一個長300寬200，藍色的長方形
#定義畫太陽的方法
def sun(x,y,length,color):    
#定義 "sun" 函式，有四個輸入,x,y是起點座標，length是長度，color是顏色turtle.up()          #筆拿起來
turtle.color(color)  #設定顏色為color
turtle.goto(x,y)     #移動到(x,y)
turtle.setheading(345)   #面向345度的方向
turtle.down()            #下筆開始畫
turtle.begin_fill()      #開始填滿
counter=0                #計數器=0
while True:              #無線迴圈
  turtle.forward(length)    #往前length的距離
  turtle.left(150)          #左轉150度
  counter+=1                #計數器+1
  if counter>=12:         #如果計數器大於或等於12
    break                 #就跳出迴圈
turtle.end_fill()        #結束填滿
sun(-150,100,175,'white')    #從(-150,100)開始畫一個175大小的白色太陽turtle.up()                  #筆拿起來
#畫圓
turtle.color('blue')  #藍色
turtle.goto(-104,100) #設定起點座標
turtle.setheading(270) #面向270度方向
turtle.down()         #下筆
turtle.pensize(10)    #筆的粗細調成10
turtle.circle(44)     #畫一個半徑44的圓
turtle.up()           #筆拿起來

成果：

python turtle 繪圖過程

因為是一筆一筆畫的，所以只要確定每個元件的起始點就沒有太大問題了

but! 人生最麻煩就是這個 but

swift 要畫圖好像就只能給座標，像是下面例子：

let path = UIBezierPath()
var point = CGPoint(x: 0, y: 0)
path.move(to: point)
point = CGPoint(x: 100, y: 0)
path.addLine(to: point)
point = CGPoint(x: 100, y: 100)
path.addLine(to: point)
path.close()

會畫出一個三角形

那麼我們的國旗就會變得很難畫，十二道光芒的尖端座標都要標出來，那麼如何知道那些點的座標呢？有兩種方法，第一種是運用以前學過的座標，幾何跟三角函數開始猛算，把十二個尖端的座標都算出來，第二種方法比較懶，既然都有python的程式了，直接用程式標出那十二個尖端的座標就好，我比較懶，所以選了第二種

經過座標的標定和轉換後，剩下的就是把程式兜在一起而已
以下是完整的程式

import UIKit
import PlaygroundSupport
// 畫國旗
// 紅底
let flag = CGRect(x: 0, y:0, width: 600,height: 400)
// 藍底
let blue = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
let flagImageView = UIImageView(frame: flag)
flagImageView.addSubview(blue)
flagImageView.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
blue.backgroundColor = UIColor(red: 0, green: 0, blue: 0.6, alpha: 1)
// 太陽尖角座標
let stars = [(0.0, 200.0), (169.037019601, 154.706667107), (45.2933328929, 278.450353815), (90.5866657859, 109.413334214), (135.879998679, 278.450353815), (12.1363119712, 154.706667107), (181.173331572, 200.0), (12.1363119712, 245.293332893), (135.879998679, 121.549646185), (90.5866657859, 290.586665786), (45.2933328929, 121.549646185), (169.037019601, 245.293332893)]
// 十二道光芒
let sun = UIBezierPath()
sun.move(to: CGPoint(x: 50.0, y: 100.0))
for (xpos,ypos) in stars{
sun.addLine(to: CGPoint(x: xpos+50.0, y: ypos-100.0))
}
sun.close()
let sunLayer = CAShapeLayer()
sunLayer.path = sun.cgPath
let sunframe = CGRect(x: 0, y: 0, width: 300, height: 200)
let sunView = UIView(frame: sunframe)
sunView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
sunView.layer.mask = sunLayer
flagImageView.addSubview(sunView)
// 太陽中間的圓
let path = UIBezierPath(ovalIn: CGRect(x: 50, y: 50, width: 100, height: 100))
let circleLayer = CAShapeLayer()
circleLayer.path = path.cgPath
let circleframe = CGRect(x: 40, y: 0, width: 200, height: 200)
let circleView = UIView(frame: circleframe)
circleView.layer.mask = circleLayer
circleView.backgroundColor = UIColor(red: 0, green: 0, blue: 0.6, alpha: 1)
flagImageView.addSubview(circleView)
let lilCircle = UIView(frame: CGRect(x: 95, y: 55, width: 90, height: 90))
lilCircle.layer.cornerRadius = 45
lilCircle.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
flagImageView.addSubview(lilCircle)
PlaygroundPage.current.liveView = flagImageView

成果（下圖左）：

左邊是我畫的，右邊是維基百科上的

對照一下wekipedia上面的國旗，我畫的太陽有點太大了，但是調整大小要把全部座標改掉，有點麻煩就算了，還有藍色的部分，如果用官方建議的顏色畫出來會太亮，我故意調暗才讓顏色接近wiki上面的圖，不知道是不是色碼秀錯了

下面是維基百科上的標準國旗畫法，有興趣的人可以自己試試看

這個作業程式的部分不難，大部分的時間都花在調座標，調顏色等等，用程式繪圖不只要有不錯的數學概念，還要很有耐心，真的頗累人，以上就是這次的作業