#10 用程式畫圖（基礎篇）- 製作冰島國旗圖案

學習UIView、其他的型別屬性、 addSubview

在Storyboard中，我們可以利用UI元件- View拼出一幅畫，這次就來看看這其中的程式，組合數個簡單的幾何圖形，畫出冰島國旗。

在Storyboard中，用View拼出奈良美智女孩

用程式畫冰島國旗

用程式畫圖

在storyboard中，不同的元件之間會有「階層」的關係，用view作畫時，也會出現這樣的關係。

還記得之前在製作去背圖片的疊圖嗎？那時候使用了addSubview(function)作出二張圖片互疊的效果，這次用view畫圖也是用了類似的方式。

概念：
1. 找一張要仿製的國旗或圖案，拆解圖案組成的細節，確認細部幾何圖形的座標及尺寸。
2. 在playground加入UIKit ☞ import UIKit
3. 生出數個幾何圖形 ☞ 
   
  - 存一個圖形存在的位置及尺寸的變數 ➩ 
    var rect = CGRect(x:, y:, width:, height: )
   
  - 在要放圖形的地方，生出底圖的view ➩ 
    let backgroundView = UIView(frame:rect)
   
  - 決定底圖view的顏色 
    backgroundView.backgroundColor = UIColor(red:, green:, blue:, alpha:)

  - 生出要疊在底圖上面的圖形位置及尺寸 ➩ 
    rect = CGRect(x: (backgroundView.frame.width - 106)/2, y: (backgroundView.frame.height - 106) / 2, width: 106, height: 106)
  - 在上層圖形的地方，生出上層圖形view ➩ 此圖將來要設成圓形
    let circleView = UIView(frame:rect)
  - 決定上層圖形view的顏色
    circleView.backgroundColor = UIColor(red:, green:, blue:, alpha:)
4. 把2個view疊在一起（上層圖形view是底圖view的subview，呼叫addSubview)
   ☞ backgroundView.addSubview(circleView)
5. 設定上層圖形為圓形（利用型別屬性layer.cornerRadius，改變元件形狀）
   ☞ circleView.layer.cornerRadius = 53
6. run組合好的圖形
   ☞ backgroundView
＊因為會用到很多幾何圖形組成國旗，所以圖形的範圍及尺寸用var宣告。
＊上層圖形設的尺寸為106，所以要讓它變成圓形，圓角的曲度就是長寬的一半，106/2=53。

畫出冰島國旗（基本版）

找張冰島國旗的圖片 （因為夢想要去冰島看極光XD）

Flag of Iceland image and meaning Icelandic flag

確認組成冰島國旗的幾何圖形位置、尺寸及顏色

(左）用GeoGebra查詢座標；（右）查詢顏色代碼

1. 先畫出底圖（藍）

2. 畫出白色十字

3. 畫出紅色十字

完成！

完整程式：
import UIKit
var rect = CGRect(x: 90, y: 90, width: 100, height: 72)
let flagView = UIView(frame: rect)
flagView.backgroundColor = UIColor(red: 2/255, green: 82/255, blue: 156/255, alpha: 1)

rect = CGRect(x: 28, y: 0, width: 16, height: (flagView.frame.height))
let whiteYView = UIView(frame: rect)whiteYView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)flagView.addSubview(whiteYView)
rect = CGRect(x: 0, y: 28, width: (flagView.frame.width), height: (whiteYView.frame.width))
let whiteXView = UIView(frame: rect)
whiteXView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
flagView.addSubview(whiteXView)

rect = CGRect(x: 32, y: 0, width: (whiteYView.frame.width)/2, height: (flagView.frame.height))
let redYView = UIView(frame: rect)
redYView.backgroundColor = UIColor(red: 220/255, green:30/255 , blue:53/255 , alpha: 1)
flagView.addSubview(redYView)
rect = CGRect(x: 0, y: 32, width: (flagView.frame.width), height: (redYView.frame.width))
let redXView = UIView(frame: rect)
redXView.backgroundColor = UIColor(red: 220/255, green:30/255 , blue:53/255 , alpha: 1)
flagView.addSubview(redXView)

相關參考資料

#43 從程式製作國旗圖案

查詢圖形位置及尺寸：

搭配網站查詢圖片的座標畫圖

如何使用 GeoGebra 查座標畫國旗

查詢顏色：

Generate color palette from image

程式基本觀念筆記：

#8 客製專屬色彩的毛線球- 從playground(程式)調色去背圖片

#9 從playground設定圖片的其他參數- 型別屬性(type property)的運用