如何使用 GeoGebra 查座標畫星星

以巴拿馬國旗的星星為例:

1 從 wiki 下載巴拿馬國旗的圖片。

巴拿马国旗 - 维基百科，自由的百科全书

2 連到 GeoGebra 網站，點選 START GRAPHING。

GeoGebra | Free Math Apps - used by over 100 Million Students & Teachers Worldwide

3 上傳國旗圖片。

點選左上角的 + 後，點選 Image 上傳圖片。

4 調整圖片的位置和大小。

讓圖片的左上角在座標 (0, 0) 的位置。利用右下方的放大鏡縮放畫布，利用 A & B 兩個小圓點調整圖片的大小。

5 複製 10 個小圓點，放到星星的十個頂點上。

點選小圓點後，點選三個點的圖示，然後再點擊 Duplicate 複製。

在星星上標記十個小圓點後，從左邊的列表即可看出每個點的座標。

待會用 Swift 畫星星時，因為 iOS 的座標以左上角為 (0, 0)，Y 軸愈向下數字愈大，所以請記得將列表裡負數的 Y 座標改成正數。(待會畫圖時，小數點後的數字也可忽略。)

為了畫出漂亮的國旗，我們也需要知道顏色的 RGB。從以下連結可查到巴拿馬國旗的顏色。

Panama Flag Colors " Country Flags " SchemeColor.com

程式實作

現在座標和顏色都知道了，接下來用 Swift 畫出國旗再也不是難事了。

1 畫出國旗左上角的藍色星星。

let backgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
let blueStarView = UIView(frame: backgroundView.frame)
blueStarView.backgroundColor = UIColor(red: 0, green: 82/255, blue: 147/255, alpha: 1)
let path = UIBezierPath()
path.move(to: CGPoint(x: 51, y: 42))
path.addLine(to: CGPoint(x: 69, y: 43))
path.addLine(to: CGPoint(x: 75, y: 25))
path.addLine(to: CGPoint(x: 80, y: 42))
path.addLine(to: CGPoint(x: 98, y: 43))
path.addLine(to: CGPoint(x: 83, y: 53))
path.addLine(to: CGPoint(x: 89, y: 68))
path.addLine(to: CGPoint(x: 75, y: 59))
path.addLine(to: CGPoint(x: 61, y: 68))
path.addLine(to: CGPoint(x: 66, y: 53))
path.close()
let starShapeLayer = CAShapeLayer()
starShapeLayer.path = path.cgPath
blueStarView.layer.mask = starShapeLayer
backgroundView.addSubview(blueStarView)

2 加上紅色和藍色長方形。

let redView = UIView(frame: CGRect(x: backgroundView.frame.midX, y: 0, width: backgroundView.frame.midX, height: backgroundView.frame.midY))
redView.backgroundColor = UIColor(red: 210/255, green: 16/255, blue: 52/255, alpha: 1)
backgroundView.addSubview(redView)
let blueView = UIView(frame: CGRect(x: 0, y: redView.frame.height, width: redView.frame.width, height: redView.frame.height))
blueView.backgroundColor = blueStarView.backgroundColor
backgroundView.addSubview(blueView)

3 畫多顆星星。

等等，還少了右下角的紅色星星呀 ? 很多國旗都莫名地有很多星星，要如何將它們一個個畫出呢 ?

比較笨的方法 1:

利用 GeoGebra 找出每顆星星的頂點座標，然後再利用 UIBezierPath 畫出星星的路徑。

比方聰明的方法 2:

1. 用 UIBezierPath 產生第一顆星星的路徑。

let path = UIBezierPath()
path.move(to: CGPoint(x: 51, y: 42))
path.addLine(to: CGPoint(x: 69, y: 43))
path.addLine(to: CGPoint(x: 75, y: 25))
path.addLine(to: CGPoint(x: 80, y: 42))
path.addLine(to: CGPoint(x: 98, y: 43))
path.addLine(to: CGPoint(x: 83, y: 53))
path.addLine(to: CGPoint(x: 89, y: 68))
path.addLine(to: CGPoint(x: 75, y: 59))
path.addLine(to: CGPoint(x: 61, y: 68))
path.addLine(to: CGPoint(x: 66, y: 53))
path.close()

2 產生左上角的藍色星星。

let blueStarView = UIView(frame: backgroundView.frame)
blueStarView.backgroundColor = UIColor(red: 0, green: 82/255, blue: 147/255, alpha: 1)
let starShapeLayer1 = CAShapeLayer()
starShapeLayer1.path = path.cgPath
blueStarView.layer.mask = starShapeLayer1
backgroundView.addSubview(blueStarView)

3 產生跟藍色星星一樣位罝大小的紅色星星。

let redStarView = UIView(frame: blueStarView.frame)
redStarView.backgroundColor = UIColor(red: 210/255, green: 16/255, blue: 52/255, alpha: 1)
let starShapeLayer2 = CAShapeLayer()
starShapeLayer2.path = path.cgPath
redStarView.layer.mask = starShapeLayer2
backgroundView.addSubview(redStarView)

4 將紅色星星移到右下角。

redStarView.frame = blueStarView.frame.offsetBy(dx: 151, dy: 101)

我們希望紅色星星的位置跑到右下角，所以我們利用 redStarView.frame = blueStarView.frame.offsetBy(dx: 151, dy: 101) 移動 redStarView。 offsetBy 將回傳產生新的 CGRect 資料，( ) 裡傳入的 dx & dx 分別代表 x & y 移動的距離。

從offsetBy 左邊的 CGRect 得知 offsetBy 將回傳生成 CGRect 資料

offsetBy(dx:dy:) - CGRect | Apple Developer Documentation

如下圖所示，原本 blueStarView.frame 的座標是 (0, 0)，blueStarView.frame.offsetBy(dx: 151, dy: 101) 得到的座標則是 (151, 101)。

至於要移動多少距離，則可如下圖所示，在 GeoGebra 找出紅星和藍星左上頂點座標的差距，也就是 A1 (51, -41) & A11 (202, -142) 的差距。

參考連結

運用 UIBezierPath 繪製各種形狀