iOS HW 從程式製作國旗圖案-練習UIBezierPath、CAShapeLayer_0904

本週練習：

練習UIBezierPath (繪製出幾何圖形的路徑)

練習CAShapeLayer (繪製的向量圖層）

本次作業會用到的各國國旗素材：

https://www.ifreesite.com/world/

國旗列表 - 維基百科，自由的百科全書

美國州份及領地旗幟列表：

(找了一下不太好畫難度高，唯一好畫的是德州州旗，先跳過好了)

美國州份及領地旗幟列表 - 維基百科，自由的百科全書

查詢國旗的RGB顏色和XY位置：

https://yangcha.github.io/iview/iview.html

網頁記得要放大Mac：按下⌘ 和+精準找座標

1. 剛舉辦完巴黎奧運 — 法國國旗

//法國國旗
import UIKit

var backGround = CGRect(x: 0, y: 0, width: 225, height: 150)
let backGroundView = UIView(frame: backGround)
backGroundView.backgroundColor = .white

var blue = CGRect(x: 0, y: 0, width: 75, height: 150)
let blueView = UIView(frame: blue)
blueView.backgroundColor = UIColor(red: 0/255, green: 34/255, blue: 149/255, alpha: 255/255)

var red = CGRect(x: 150, y: 0, width: 75, height: 150)
let redView = UIView(frame: red)
redView.backgroundColor = UIColor(red: 237/255, green: 40/255, blue: 56/255, alpha: 255/255)

backGroundView.addSubview(blueView)
backGroundView.addSubview(redView)

2. 是不是到公海了?我跟巴拿馬總統也有點交情 — 巴拿馬國旗

提到巴拿馬不得不提到賭神2的劇情，複習一下經典橋段

賭王: 在公海, 誰都沒有權力抓我. 只有這艘船註冊的國家可以!
賭神: 興叔, 是這樣的嗎?
興叔: 我的船是巴拿馬籍的
賭王: 我跟巴拿馬總統也有點交情
賭神: 沒有用的,你看看船是不是在公海?

//巴拿馬國旗
var backGround2 = CGRect(x: 0, y: 0, width: 225, height: 150)
let backGround2View = UIView(frame: backGround2)
backGround2View.backgroundColor = .white

//左上藍色星星
let path = UIBezierPath()
path.move(to: CGPoint(x: 57, y: 20))
path.addLine(to: CGPoint(x: 53, y: 33))
path.addLine(to: CGPoint(x: 39, y: 33))
path.addLine(to: CGPoint(x: 50, y: 42))
path.addLine(to: CGPoint(x: 46, y: 52))
path.addLine(to: CGPoint(x: 57, y: 46))
path.addLine(to: CGPoint(x: 67, y: 52))
path.addLine(to: CGPoint(x: 63, y: 42))
path.addLine(to: CGPoint(x: 75, y: 33))
path.addLine(to: CGPoint(x: 62, y: 33))
path.close()

let blueStarLayer = CAShapeLayer()
blueStarLayer.path = path.cgPath
blueStarLayer.fillColor = UIColor(red: 0/255, green: 82/255, blue: 147/255, alpha: 255/255).cgColor


//左下藍色
var blue2 = CGRect(x: 0, y: 75, width: 112.5, height: 75)
let blue2View = UIView(frame: blue2)
blue2View.backgroundColor = UIColor(red: 0/255, green: 82/255, blue: 147/255, alpha: 255/255)


//右上紅色
var red2 = CGRect(x: 112.5, y: 0, width: 112.5, height: 75)
let red2View = UIView(frame: red2)
red2View.backgroundColor = UIColor(red: 211/255, green: 16/255, blue: 52/255, alpha: 255/255)

//右下紅色星星
let redpath = UIBezierPath()
redpath.move(to: CGPoint(x: 168, y: 94))
redpath.addLine(to: CGPoint(x: 165, y: 107))
redpath.addLine(to: CGPoint(x: 150, y: 107))
redpath.addLine(to: CGPoint(x: 161, y: 116))
redpath.addLine(to: CGPoint(x: 157, y: 126))
redpath.addLine(to: CGPoint(x: 168, y: 120))
redpath.addLine(to: CGPoint(x: 179, y: 126))
redpath.addLine(to: CGPoint(x: 176, y: 116))
redpath.addLine(to: CGPoint(x: 186, y: 107))
redpath.addLine(to: CGPoint(x: 173, y: 107))
redpath.close()

let redStarLayer = CAShapeLayer()
redStarLayer.path = redpath.cgPath
redStarLayer.fillColor = UIColor(red: 211/255, green: 16/255, blue: 52/255, alpha: 255/255).cgColor


backGround2View.addSubview(blue2View)
backGround2View.addSubview(red2View)
backGround2View.layer.addSublayer(blueStarLayer)
backGround2View.layer.addSublayer(redStarLayer)
backGround2View

終於畫出來了！

3.俄羅斯對烏克蘭發動開戰-烏克蘭國旗

俄烏戰爭開戰2年多還沒結束希望能和平結束

//烏克蘭國旗
var backGround3 = CGRect(x: 0, y: 0, width: 225, height: 150)
let backGround3View = UIView(frame: backGround3)
backGround3View.backgroundColor = UIColor(red: 255/255, green: 213/255, blue: 0/255, alpha: 255)

var blue3 = CGRect(x: 0, y: 0, width: 225, height: 75)
let blue3View = UIView(frame: blue3)
blue3View.backgroundColor = UIColor(red: 0/255, green: 90/255, blue: 187/255, alpha: 255/255)

backGround3View.addSubview(blue3View)

4.馬達加斯加國旗

當年電影馬達加斯加也蠻紅的，出了好幾部系列電影。

//馬達加斯加國旗
var backGround4 = CGRect(x: 0, y: 0, width: 250, height: 167)
let backGround4View = UIView(frame: backGround4)
backGround4View.backgroundColor = .white

//紅色
var red4 = CGRect(x: 83, y: 0, width: 167, height: 83.5)
let red4View = UIView(frame: red4)
red4View.backgroundColor = UIColor(red: 253/255, green: 60/255, blue: 50/255, alpha: 255/255)
//綠色
var green4 = CGRect(x: 83, y: 83.5, width: 167, height: 83.5)
let green4View = UIView(frame: green4)
green4View.backgroundColor = UIColor(red: 0/255, green: 126/255, blue: 58/255, alpha: 255/255)
backGround4View.addSubview(red4View)
backGround4View.addSubview(green4View)

5.格陵蘭國旗

練習UIBezierPath (繪製圓型)

紅色半圓代表太陽，白色半圓象徵冰山。 整個畫面令人聯想到夕陽西下，太陽的影子投射在海面上。

//格陵蘭國旗
//建立白色底圖
var backGround5 = CGRect(x: 0, y: 0, width: 320, height: 213)
let backGround5View = UIView(frame: backGround5)
backGround5View.backgroundColor = .white

//下面紅色區塊
var red5 = CGRect(x: 0, y: 106, width: 320, height: 106)
let red5View = UIView(frame: red5)
red5View.backgroundColor = UIColor(red: 209/255, green: 12/255, blue: 50/255, alpha: 255/255)

//下白色半圓
let aDegree = Double.pi/180
//1 度是 pi / 180弧度，我們利用 let aDegree = Double.pi / 180 算出一度的大小，存在常數 aDegree

let downcirclepath = UIBezierPath(arcCenter: CGPoint(x: 124, y: 106), radius: 71, startAngle: .pi, endAngle: 0, clockwise: false)

//arcCenter: 圓心座標。
//radius: 半徑。
//startAngle & endAngle: 圓弧開始和結束的角度。
//圓形有 360 度，在程式裡我們以 2 pi 表示 360 度，1 pi 表示 180 度。
//角度 0 度的位置在右邊，180 度在左邊
//clockwise: 是否為順時針


let downlayer = CAShapeLayer()
downlayer.path = downcirclepath.cgPath
downlayer.fillColor = UIColor.white.cgColor


//上紅色半圓
let upcirclepath = UIBezierPath(arcCenter: CGPoint(x: 124, y: 106), radius: 71, startAngle: .pi, endAngle: 0, clockwise: true)
let uplayer = CAShapeLayer()
uplayer.path = upcirclepath.cgPath
uplayer.fillColor = UIColor(red: 209/255, green: 12/255, blue: 50/255, alpha: 255/255).cgColor

backGround5View.addSubview(red5View)
backGround5View.layer.addSublayer(uplayer)
backGround5View.layer.addSublayer(downlayer)
backGround5View

最後畫出來很感動！

心得：

1. 認識了很多國旗，感覺好像小學生一樣發現許多有趣的國旗和歷史。
2. 畫圖不難，難在有沒有足夠的耐心，尤其要花時間找X,Y的定位。
3. 每天寫作業督促自己不要怠惰，雖然有時候也會有一點點小怠惰，就算一天寫個30分鐘到1小時也好，做完這件事情，再去做其他事情，會感覺一天過得很充實。
4. 畫到一半不會的地方，可以問AI。

ChatGPT

5. 後來又詢問addSublayer和addSubView的差異

ChatGPT

參考資料：

使用 #Preview 預覽 UIBezierPath 的繪圖結果

作業#15 — 從程式製作國旗圖案

筆記：運用 UIBezierPath、CAShapeLayer繪製簡易圖形