#89 當SwiftUI遇到石虎抱抱

關心石虎～～人人有責

前言

今天我們要建立UI為SwiftUI的專案，並實際來練習Path繪圖，由於SwiftUI還沒有時間深入的研究，因此先練習一個小題目(ref2)。
在兩年前有去台北上過彼得潘的課程，現在重頭開始學習iOS App開發，也可以接者練習網站上的一百道題目考驗(ref3)，有許多題目都非常的有趣。

現在，我們馬上開始！

練習目標

今天我們要建立Swift專案，並利用Path來描繪可愛的石虎，首先參考一下原圖

圖片來源: ref1

練習過程

1. 首先建立SwiftUI的專案，建立的過程都與Day13相同(如下方連結)，唯一要注意的是User Interface要選『SwiftUI』(如下圖)

SwiftUI專案

2. 首先加入原圖當作背景圖，置放於下方區塊，繪圖區在我們的左上角

// background
Image("Cat3")
 .resizable()
 .scaledToFit()
 .frame(width: 300, height: 400, alignment: .bottom)

3. 接者畫出個別區塊，首先是頭部的區塊

HeadLayer

4. 接者依序畫出耳朵，眼睛，鬍鬚，嘴巴等等各區塊，由於程式碼很多，請直接參考Github專案，這邊就不再列出

完成圖

石虎抱抱

可以看到上方的石虎抱抱，是我們用Path所描繪出來的。而下方的背景圖，則是原圖

總結

在今天的文章裡，我們練習建立了SwiftUI專案，
也練習了SwiftUI的使用Path來繪製可愛的石虎抱抱。
今天的內容就到這邊，感謝讀者們的閱讀。

Github

chiron-wang/Peter13

Reference

1. 南投縣友善石虎農作促進會《石虎家族的綠保運動》

南投縣友善石虎農作促進會《石虎家族的綠保運動》

2. 俄羅斯插畫家親繪石虎送台灣 有望登上彩繪列車！

俄羅斯插畫家親繪石虎送台灣 有望登上彩繪列車！ | 聯合新聞網

3. #86 利用 SwiftUI 的 Path 繪圖

#86 利用 SwiftUI 的 Path 繪圖

4. 火車環島3671藍皮普快紀念品

火車環島3671藍皮普快紀念品